import { useState, useMemo } from 'react';

import { cn } from '@/lib/utils';

interface ChecklistItem {
  id: string;
  label: string;
  description?: string;
  category?: string;
}

interface ChecklistTrackerProps {
  title?: string;
  items?: ChecklistItem[];
  categories?: string[];
}

function ChecklistTracker({
  title = 'SEO Checklist',
  items = [],
  categories = [],
}: ChecklistTrackerProps) {
  const [checked, setChecked] = useState<Set<string>>(new Set());
  const [activeCategory, setActiveCategory] = useState<string | null>(null);

  const filtered = activeCategory ? items.filter((item) => item.category === activeCategory) : items;

  const progress = useMemo(() => {
    if (items.length === 0) return 0;
    return Math.round((checked.size / items.length) * 100);
  }, [checked.size, items.length]);

  const toggle = (id: string) => {
    setChecked((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  return (
    <div className="my-8 rounded-xl border bg-card p-6">
      <div className="mb-4 flex items-center justify-between">
        <h4 className="text-lg font-semibold">{title}</h4>
        <span className="text-sm font-medium text-muted-foreground">
          {checked.size}/{items.length} complete
        </span>
      </div>

      {/* Progress bar */}
      <div className="mb-4 h-2 overflow-hidden rounded-full bg-muted">
        <div
          className="h-full rounded-full bg-primary transition-all duration-300"
          style={{ width: `${progress}%` }}
        />
      </div>

      {/* Category filter */}
      {categories.length > 1 && (
        <div className="mb-4 flex flex-wrap gap-2">
          <button
            onClick={() => setActiveCategory(null)}
            className={cn(
              'rounded-full px-3 py-1 text-xs font-medium transition-colors',
              !activeCategory
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted text-muted-foreground hover:bg-muted/80',
            )}
          >
            All
          </button>
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setActiveCategory(cat)}
              className={cn(
                'rounded-full px-3 py-1 text-xs font-medium transition-colors',
                activeCategory === cat
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-muted text-muted-foreground hover:bg-muted/80',
              )}
            >
              {cat}
            </button>
          ))}
        </div>
      )}

      {/* Checklist items */}
      <ul className="space-y-2">
        {filtered.map((item) => (
          <li key={item.id}>
            <label
              className={cn(
                'flex cursor-pointer items-start gap-3 rounded-lg p-3 transition-colors hover:bg-muted/50',
                checked.has(item.id) && 'bg-green-50/50 dark:bg-green-950/20',
              )}
            >
              <input
                type="checkbox"
                checked={checked.has(item.id)}
                onChange={() => toggle(item.id)}
                className="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary accent-primary"
              />
              <div>
                <span
                  className={cn(
                    'text-sm font-medium',
                    checked.has(item.id) && 'text-muted-foreground line-through',
                  )}
                >
                  {item.label}
                </span>
                {item.description && (
                  <p className="mt-0.5 text-xs text-muted-foreground">{item.description}</p>
                )}
              </div>
            </label>
          </li>
        ))}
      </ul>

      {progress === 100 && items.length > 0 && (
        <div className="mt-4 rounded-lg bg-green-50 p-3 text-center text-sm font-medium text-green-700 dark:bg-green-950/30 dark:text-green-400">
          All items complete!
        </div>
      )}
    </div>
  );
}

export default ChecklistTracker;