"use client";
import { useEffect, useState, useMemo } from "react";
import { useFamily } from "@/app/FamilyProvider";
import { useStageCheck } from "@/hooks/useStageCheck";
import { MILESTONES, type MilestoneDef } from "@/lib/milestones";
import { Button, Input } from "@/components/ui";
import { fmtDate } from "@/lib/date-ist";

type Category = "all" | "social" | "motor" | "language" | "cognitive";
type Filter = "all" | "achieved" | "upcoming";

interface MilestoneWithStatus extends MilestoneDef {
  achieved: boolean;
  achievedAt: string | null;
  notes: string | null;
}

const CATEGORY_COLORS: Record<string, string> = {
  social:    "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300",
  motor:     "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
  language:  "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300",
  cognitive: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300",
};

export default function MilestonesPage() {
  const { child } = useFamily();
  const stage = useStageCheck(child?.birthDate ?? null);

  const [items, setItems] = useState<MilestoneWithStatus[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<Filter>("all");
  const [category, setCategory] = useState<Category>("all");

  const [pendingKey, setPendingKey] = useState<string | null>(null);
  const [pendingDate, setPendingDate] = useState<string>(
    new Date().toISOString().slice(0, 10)
  );

  useEffect(() => {
    if (!child?.id) return;
    setLoading(true);
    fetch(`/api/milestones?childId=${child.id}`)
      .then(r => r.json())
      .then(d => { setItems(d.items || []); setLoading(false); })
      .catch(() => setLoading(false));
  }, [child?.id]);

  async function toggleMilestone(m: MilestoneWithStatus) {
    if (m.achieved) {
      await fetch(`/api/milestones/${m.key}?childId=${child!.id}`, { method: "DELETE" });
      setItems(prev => prev.map(x => x.key === m.key ? { ...x, achieved: false, achievedAt: null } : x));
      if (pendingKey === m.key) setPendingKey(null);
    } else {
      setPendingKey(m.key);
      setPendingDate(new Date().toISOString().slice(0, 10));
    }
  }

  async function confirmAchieved(key: string) {
    await fetch("/api/milestones", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ childId: child!.id, milestoneKey: key, achievedAt: pendingDate }),
    });
    setItems(prev => prev.map(x => x.key === key ? { ...x, achieved: true, achievedAt: pendingDate } : x));
    setPendingKey(null);
  }

  const filtered = useMemo(() => {
    const ageMonths = stage?.ageMonths ?? 0;
    return items.filter(m => {
      if (category !== "all" && m.category !== category) return false;
      if (filter === "achieved") return m.achieved;
      if (filter === "upcoming") return !m.achieved && m.ageMonths <= ageMonths + 6;
      return true;
    });
  }, [items, filter, category, stage]);

  const achievedCount = items.filter(m => m.achieved).length;
  const nowItems = useMemo(() => {
    if (!stage) return new Set<string>();
    const lo = stage.ageMonths - 3, hi = stage.ageMonths + 3;
    return new Set(items.filter(m => m.ageMonths >= lo && m.ageMonths <= hi).map(m => m.key));
  }, [items, stage]);

  if (!child) return (
    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
      <p className="text-gray-500">Select a child to view milestones.</p>
    </div>
  );

  return (
    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 pb-20">
      {/* Header */}
      <div className="p-4 flex justify-between items-center">
        <div className="flex items-center gap-4">
          <a href="/menu" className="p-2">←</a>
          <div>
            <h1 className="text-xl font-bold">Milestones 🌱</h1>
            <p className="text-xs text-gray-500 dark:text-gray-400">{child.name}</p>
          </div>
        </div>
        {stage && (
          <span className="text-xs font-medium px-3 py-1.5 rounded-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-sm">
            {stage.emoji} {stage.label}
          </span>
        )}
      </div>

      {/* Progress bar */}
      <div className="mx-4 mb-4 p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm">
        <div className="flex items-center justify-between text-sm mb-2">
          <span className="font-medium text-gray-700 dark:text-gray-300">
            {achievedCount} of {items.length} milestones
          </span>
          <span className="text-gray-400">
            {Math.round(achievedCount / Math.max(items.length, 1) * 100)}%
          </span>
        </div>
        <div className="h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
          <div
            className="h-full bg-gradient-to-r from-rose-400 to-pink-400 rounded-full transition-all duration-500"
            style={{ width: `${achievedCount / Math.max(items.length, 1) * 100}%` }}
          />
        </div>
      </div>

      {/* Filter tabs */}
      <div className="px-4 mb-3 flex gap-2 overflow-x-auto">
        {(["all", "achieved", "upcoming"] as Filter[]).map(f => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className={`px-4 py-2 rounded-full text-sm whitespace-nowrap transition-colors ${
              filter === f
                ? "bg-rose-400 text-white"
                : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400"
            }`}
          >
            {f.charAt(0).toUpperCase() + f.slice(1)}
          </button>
        ))}
      </div>

      {/* Category chips */}
      <div className="px-4 mb-4 flex gap-2 overflow-x-auto">
        {(["all", "social", "motor", "language", "cognitive"] as Category[]).map(c => (
          <button
            key={c}
            onClick={() => setCategory(c)}
            className={`px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors ${
              category === c
                ? "bg-rose-400 text-white"
                : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400"
            }`}
          >
            {c.charAt(0).toUpperCase() + c.slice(1)}
          </button>
        ))}
      </div>

      {/* Milestone grid */}
      <div className="px-4">
        {loading ? (
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="h-28 bg-white dark:bg-gray-800 rounded-2xl animate-pulse" />
            ))}
          </div>
        ) : filtered.length === 0 ? (
          <div className="text-center py-20 text-gray-400">
            <div className="text-5xl mb-3">🌱</div>
            <p>No milestones match this filter.</p>
          </div>
        ) : (
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {filtered.map(m => (
              <div key={m.key}>
                <button
                  onClick={() => toggleMilestone(m)}
                  className={`w-full text-left rounded-2xl p-4 transition-all shadow-sm relative ${
                    m.achieved
                      ? "bg-green-50 dark:bg-green-900/20 border-2 border-green-300 dark:border-green-700"
                      : "bg-white dark:bg-gray-800 border border-transparent hover:border-gray-200 dark:hover:border-gray-600"
                  }`}
                >
                  {nowItems.has(m.key) && !m.achieved && (
                    <span className="absolute top-2 right-2 text-xs">📍</span>
                  )}
                  {m.achieved && (
                    <span className="absolute top-2 right-2 text-green-500 text-sm">✓</span>
                  )}
                  <div className="text-2xl mb-2">{m.emoji}</div>
                  <p className="text-xs font-semibold text-gray-800 dark:text-white leading-tight">{m.label}</p>
                  <p className="text-xs text-gray-400 mt-1">{m.ageRangeLabel}</p>
                  {m.achieved && m.achievedAt && (
                    <p className="text-xs text-green-600 dark:text-green-400 mt-1">
                      {fmtDate(m.achievedAt, { day: "numeric", month: "short" })}
                    </p>
                  )}
                  <span className={`inline-block text-xs px-1.5 py-0.5 rounded-full mt-2 ${CATEGORY_COLORS[m.category]}`}>
                    {m.category}
                  </span>
                </button>

                {/* Inline date picker */}
                {pendingKey === m.key && (
                  <div className="mt-2 bg-white dark:bg-gray-800 rounded-xl p-3 shadow-md border border-gray-100 dark:border-gray-700">
                    <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">When did this happen?</p>
                    <Input
                      type="date"
                      value={pendingDate}
                      max={new Date().toISOString().slice(0, 10)}
                      onChange={e => setPendingDate(e.target.value)}
                      className="mb-2"
                    />
                    <div className="flex gap-2">
                      <Button size="sm" fullWidth onClick={() => confirmAchieved(m.key)}>
                        Mark achieved
                      </Button>
                      <Button size="sm" variant="secondary" fullWidth onClick={() => setPendingKey(null)}>
                        Cancel
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
