import React, { useMemo, useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Checkbox } from "@/components/ui/checkbox";
import { Trash2, Plus, Save, AlertTriangle, Clock, Search, Filter, Calendar, Users, Activity as ActivityIcon, Wrench } from "lucide-react";
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, Legend } from "recharts";

// --- Types ---
type Entry = {
  id: string;
  date: string; // YYYY-MM-DD
  start: string; // HH:MM (24h)
  end: string; // HH:MM (24h)
  activity: string;
  apparatus: string;
  details: string;
  personnel: string[];
};

type Equipment = {
  name: string;
  status: "green" | "yellow" | "red";
  note?: string;
};

// --- Helpers ---
const pad = (n: number) => (n < 10 ? `0${n}` : `${n}`);
const todayStr = () => {
  const d = new Date();
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
};

const minutesBetween = (start: string, end: string) => {
  // supports over-midnight by assuming same day unless end < start (then +24h)
  const [sh, sm] = start.split(":").map(Number);
  const [eh, em] = end.split(":").map(Number);
  let startMin = sh * 60 + sm;
  let endMin = eh * 60 + em;
  if (endMin < startMin) endMin += 24 * 60;
  return Math.max(0, endMin - startMin);
};

const defaultActivities = [
  "Admin – Reports",
  "Admin – Notes/Updates",
  "Patrol – Routine",
  "911 – Emergency Response",
  "Rescue – Waterborne",
  "Training",
  "Maintenance",
  "Community Outreach",
];

const defaultApparatus = [
  "HAB1N",
  "HAB2N",
  "RHIB-21",
  "Rescue PWC-1",
  "Truck-Unit 2",
  "Foot Patrol",
];

const defaultPersonnel = [
  "Ayers, Ian",
  "Kabris, George",
  "Higgins, John",
  "Warne, Edward",
  "Pickett, Jack",
  "Doe, Jane",
];

const DEFAULT_EQUIPMENT: Equipment[] = [
  { name: "HAB1N", status: "green" },
  { name: "HAB2N", status: "green" },
  { name: "RHIB-21", status: "yellow", note: "Awaiting bilge pump" },
  { name: "Rescue PWC-1", status: "green" },
  { name: "Truck-Unit 2", status: "green" },
  { name: "AIS System", status: "green" },
  { name: "TAK Server", status: "green" },
];

// Storage keys
const LS_ENTRIES = "msdl_entries_v1";
const LS_EQUIP = "msdl_equipment_v1";
const LS_HEADER = "msdl_header_v1";

export default function MarineSafetyDailyLog() {
  // Header fields
  const [departmentName, setDepartmentName] = useState("Ventura Port District - Harbor Patrol");
  const [station, setStation] = useState("ST1 - Harbor Patrol Headquarters");
  const [shift, setShift] = useState("Harbor Patrol 24 Hour Roster");
  const [specialNotes, setSpecialNotes] = useState("");

  // Equipment & critical alerts
  const [equipment, setEquipment] = useState<Equipment[]>(DEFAULT_EQUIPMENT);
  const [critical, setCritical] = useState<string>("");

  // Date & entries
  const [selectedDate, setSelectedDate] = useState<string>(todayStr());
  const [entries, setEntries] = useState<Entry[]>([]);

  // Filters/search
  const [searchText, setSearchText] = useState("");
  const [filterActivity, setFilterActivity] = useState<string>("all");
  const [filterApparatus, setFilterApparatus] = useState<string>("all");
  const [filterPersonnel, setFilterPersonnel] = useState<string>("all");

  // Reporting
  const [reportRange, setReportRange] = useState<string>("30"); // days

  // Persist
  useEffect(() => {
    const e = localStorage.getItem(LS_ENTRIES);
    const eq = localStorage.getItem(LS_EQUIP);
    const hd = localStorage.getItem(LS_HEADER);
    if (e) setEntries(JSON.parse(e));
    if (eq) setEquipment(JSON.parse(eq));
    if (hd) {
      const h = JSON.parse(hd);
      setDepartmentName(h.departmentName ?? departmentName);
      setStation(h.station ?? station);
      setShift(h.shift ?? shift);
      setSpecialNotes(h.specialNotes ?? "");
      setCritical(h.critical ?? "");
    }
  }, []);

  useEffect(() => {
    localStorage.setItem(LS_ENTRIES, JSON.stringify(entries));
  }, [entries]);

  useEffect(() => {
    localStorage.setItem(LS_EQUIP, JSON.stringify(equipment));
  }, [equipment]);

  useEffect(() => {
    localStorage.setItem(
      LS_HEADER,
      JSON.stringify({ departmentName, station, shift, specialNotes, critical })
    );
  }, [departmentName, station, shift, specialNotes, critical]);

  // Derived
  const dayEntries = useMemo(() => {
    return entries.filter((e) => e.date === selectedDate);
  }, [entries, selectedDate]);

  const filteredEntries = useMemo(() => {
    return dayEntries.filter((e) => {
      const s = searchText.toLowerCase();
      const textMatch = !s ||
        e.details.toLowerCase().includes(s) ||
        e.activity.toLowerCase().includes(s) ||
        e.apparatus.toLowerCase().includes(s) ||
        e.personnel.join(", ").toLowerCase().includes(s);
      const actMatch = filterActivity === "all" || e.activity === filterActivity;
      const appMatch = filterApparatus === "all" || e.apparatus === filterApparatus;
      const perMatch = filterPersonnel === "all" || e.personnel.includes(filterPersonnel);
      return textMatch && actMatch && appMatch && perMatch;
    });
  }, [dayEntries, searchText, filterActivity, filterApparatus, filterPersonnel]);

  // Add/edit form state
  const [form, setForm] = useState<Entry>({
    id: "",
    date: todayStr(),
    start: "08:00",
    end: "09:00",
    activity: defaultActivities[0],
    apparatus: defaultApparatus[0],
    details: "",
    personnel: [],
  });

  useEffect(() => {
    setForm((f) => ({ ...f, date: selectedDate }));
  }, [selectedDate]);

  const resetForm = () => setForm({
    id: "",
    date: selectedDate,
    start: "08:00",
    end: "09:00",
    activity: defaultActivities[0],
    apparatus: defaultApparatus[0],
    details: "",
    personnel: [],
  });

  const saveEntry = () => {
    if (!form.start || !form.end) return;
    const isEdit = Boolean(form.id);
    if (isEdit) {
      setEntries((prev) => prev.map((e) => (e.id === form.id ? form : e)));
    } else {
      setEntries((prev) => [{ ...form, id: crypto.randomUUID() }, ...prev]);
    }
    resetForm();
  };

  const deleteEntry = (id: string) => setEntries((prev) => prev.filter((e) => e.id !== id));
  const editEntry = (e: Entry) => setForm(e);

  // Reporting calculations
  const reportData = useMemo(() => {
    const days = parseInt(reportRange, 10);
    const now = new Date();
    const start = new Date(now);
    start.setDate(now.getDate() - days + 1);

    const inRange = entries.filter((e) => {
      const [y, m, d] = e.date.split("-").map(Number);
      const dt = new Date(y, m - 1, d);
      return dt >= start && dt <= now;
    });

    const byActivity: Record<string, number> = {};
    const byPersonnel: Record<string, number> = {};
    let totalMinutes = 0;

    for (const e of inRange) {
      const mins = minutesBetween(e.start, e.end);
      totalMinutes += mins;
      byActivity[e.activity] = (byActivity[e.activity] ?? 0) + mins;
      for (const p of e.personnel) byPersonnel[p] = (byPersonnel[p] ?? 0) + mins;
    }

    const actChart = Object.entries(byActivity).map(([k, v]) => ({ name: k, Hours: +(v / 60).toFixed(2) }));
    const perChart = Object.entries(byPersonnel).map(([k, v]) => ({ name: k, Hours: +(v / 60).toFixed(2) }));

    // sort for nicer charts
    actChart.sort((a, b) => b.Hours - a.Hours);
    perChart.sort((a, b) => b.Hours - a.Hours);

    return {
      totalHours: +(totalMinutes / 60).toFixed(2),
      actChart,
      perChart,
    };
  }, [entries, reportRange]);

  const addEquipment = () => setEquipment((prev) => [...prev, { name: `Equipment ${prev.length + 1}`, status: "green" }]);
  const updateEquipment = (idx: number, patch: Partial<Equipment>) =>
    setEquipment((prev) => prev.map((e, i) => (i === idx ? { ...e, ...patch } : e)));
  const removeEquipment = (idx: number) => setEquipment((prev) => prev.filter((_, i) => i !== idx));

  const dateBackOne = () => {
    const d = new Date(selectedDate);
    if (!isNaN(d.valueOf())) {
      d.setDate(d.getDate() - 1);
      setSelectedDate(`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`);
    }
  };
  const dateForwardOne = () => {
    const d = new Date(selectedDate);
    if (!isNaN(d.valueOf())) {
      d.setDate(d.getDate() + 1);
      setSelectedDate(`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`);
    }
  };

  return (
    <div className="min-h-screen w-full bg-slate-50 text-slate-900 p-4 md:p-8 space-y-6">
      {/* Header / Banner */}
      <Card className="shadow-md">
        <CardHeader className="pb-2">
          <CardTitle className="text-2xl md:text-3xl">Marine Safety Daily Log</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <Label>Department Name</Label>
              <Input value={departmentName} onChange={(e) => setDepartmentName(e.target.value)} />
            </div>
            <div>
              <Label>Station</Label>
              <Input value={station} onChange={(e) => setStation(e.target.value)} />
            </div>
            <div>
              <Label>Shift</Label>
              <Input value={shift} onChange={(e) => setShift(e.target.value)} />
            </div>
            <div>
              <Label className="flex items-center gap-2"><Calendar className="w-4 h-4"/> Date</Label>
              <div className="flex gap-2">
                <Button variant="outline" onClick={dateBackOne}>Back one day</Button>
                <Input type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} />
                <Button variant="outline" onClick={dateForwardOne}>Forward one day</Button>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="md:col-span-2">
              <Label>Special Notes / Activities (training, messages, events)</Label>
              <Textarea rows={3} value={specialNotes} onChange={(e) => setSpecialNotes(e.target.value)} placeholder="Enter shift-wide notes, training plans, events, announcements…"/>
            </div>
            <div>
              <Label className="flex items-center gap-2"><AlertTriangle className="w-4 h-4"/> Critical Maintenance / Failures</Label>
              <Textarea className="border-red-500" rows={3} value={critical} onChange={(e) => setCritical(e.target.value)} placeholder="Enter critical red-box alerts…"/>
              <div className="mt-2 p-3 rounded-2xl bg-red-50 border border-red-300 text-red-800">
                <strong>Critical Alerts:</strong>
                <div className="whitespace-pre-wrap text-sm mt-1">{critical || "None"}</div>
              </div>
            </div>
          </div>

          <Card className="mt-2">
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-lg"><Wrench className="w-5 h-5"/> Equipment Status</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex gap-2 flex-wrap">
                <Button size="sm" variant="outline" onClick={addEquipment}><Plus className="w-4 h-4 mr-1"/>Add Equipment</Button>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                {equipment.map((eq, idx) => (
                  <div key={idx} className="p-3 rounded-2xl border bg-white shadow-sm space-y-2">
                    <div className="flex items-center justify-between gap-2">
                      <Input value={eq.name} onChange={(e) => updateEquipment(idx, { name: e.target.value })} />
                      <Button variant="ghost" size="icon" onClick={() => removeEquipment(idx)} title="Remove"><Trash2 className="w-4 h-4"/></Button>
                    </div>
                    <div className="flex items-center gap-2">
                      <Label>Status</Label>
                      <Select value={eq.status} onValueChange={(v) => updateEquipment(idx, { status: v as Equipment["status"] })}>
                        <SelectTrigger className="w-40">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="green">Green (In Service)</SelectItem>
                          <SelectItem value="yellow">Yellow (Limited)</SelectItem>
                          <SelectItem value="red">Red (Out of Service)</SelectItem>
                        </SelectContent>
                      </Select>
                      <div className={`w-3 h-3 rounded-full ${eq.status === "green" ? "bg-green-500" : eq.status === "yellow" ? "bg-yellow-500" : "bg-red-500"}`} />
                    </div>
                    <Textarea placeholder="Note (optional)" value={eq.note || ""} onChange={(e) => updateEquipment(idx, { note: e.target.value })} />
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </CardContent>
      </Card>

      {/* Main Tabs */}
      <Tabs defaultValue="log" className="w-full">
        <TabsList className="grid grid-cols-3 max-w-xl">
          <TabsTrigger value="log">Daily Log</TabsTrigger>
          <TabsTrigger value="reports">Reports</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger>
        </TabsList>

        {/* Log Tab */}
        <TabsContent value="log" className="space-y-4 mt-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-lg"><ActivityIcon className="w-5 h-5"/> Add / Edit Log Entry</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-6 gap-3">
                <div className="md:col-span-1">
                  <Label>Start</Label>
                  <Input type="time" value={form.start} onChange={(e) => setForm({ ...form, start: e.target.value })} />
                </div>
                <div className="md:col-span-1">
                  <Label>End</Label>
                  <Input type="time" value={form.end} onChange={(e) => setForm({ ...form, end: e.target.value })} />
                </div>
                <div className="md:col-span-2">
                  <Label>Activity</Label>
                  <Select value={form.activity} onValueChange={(v) => setForm({ ...form, activity: v })}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select activity" />
                    </SelectTrigger>
                    <SelectContent>
                      {defaultActivities.map((a) => (<SelectItem key={a} value={a}>{a}</SelectItem>))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="md:col-span-2">
                  <Label>Apparatus</Label>
                  <Select value={form.apparatus} onValueChange={(v) => setForm({ ...form, apparatus: v })}>
                    <SelectTrigger>
                      <SelectValue placeholder="Select apparatus" />
                    </SelectTrigger>
                    <SelectContent>
                      {defaultApparatus.map((a) => (<SelectItem key={a} value={a}>{a}</SelectItem>))}
                    </SelectContent>
                  </Select>
                </div>
              </div>
              
              <div>
                <Label>Details</Label>
                <Textarea rows={3} value={form.details} onChange={(e) => setForm({ ...form, details: e.target.value })} placeholder="Enter narrative, incident #, location, notes…" />
              </div>

              <div>
                <Label className="flex items-center gap-2"><Users className="w-4 h-4"/> Personnel</Label>
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 p-2 rounded-2xl border">
                  {defaultPersonnel.map((p) => {
                    const checked = form.personnel.includes(p);
                    return (
                      <label key={p} className="flex items-center gap-2 cursor-pointer">
                        <Checkbox checked={checked} onCheckedChange={(v) => {
                          if (v) setForm({ ...form, personnel: [...form.personnel, p] });
                          else setForm({ ...form, personnel: form.personnel.filter((n) => n !== p) });
                        }} />
                        <span className="text-sm">{p}</span>
                      </label>
                    );
                  })}
                </div>
              </div>

              <div className="flex items-center gap-2">
                <Button onClick={saveEntry}><Save className="w-4 h-4 mr-1"/> Save Entry</Button>
                <Button variant="outline" onClick={resetForm}>Clear</Button>
                <div className="ml-auto text-sm text-slate-600 flex items-center gap-2"><Clock className="w-4 h-4"/> Duration: {minutesBetween(form.start, form.end)} min</div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-lg"><Search className="w-5 h-5"/> Log Entries</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-5 gap-2">
                <div className="md:col-span-2">
                  <Input placeholder="Search text (details, person, activity, apparatus)" value={searchText} onChange={(e) => setSearchText(e.target.value)} />
                </div>
                <div className="flex items-center gap-2 md:col-span-3">
                  <Filter className="w-4 h-4"/>
                  <Select value={filterActivity} onValueChange={setFilterActivity}>
                    <SelectTrigger className="w-[200px]"><SelectValue placeholder="Activity"/></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Activities</SelectItem>
                      {defaultActivities.map((a) => (<SelectItem key={a} value={a}>{a}</SelectItem>))}
                    </SelectContent>
                  </Select>
                  <Select value={filterApparatus} onValueChange={setFilterApparatus}>
                    <SelectTrigger className="w-[200px]"><SelectValue placeholder="Apparatus"/></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Apparatus</SelectItem>
                      {defaultApparatus.map((a) => (<SelectItem key={a} value={a}>{a}</SelectItem>))}
                    </SelectContent>
                  </Select>
                  <Select value={filterPersonnel} onValueChange={setFilterPersonnel}>
                    <SelectTrigger className="w-[200px]"><SelectValue placeholder="Personnel"/></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Personnel</SelectItem>
                      {defaultPersonnel.map((p) => (<SelectItem key={p} value={p}>{p}</SelectItem>))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div className="mt-2 border rounded-2xl overflow-hidden">
                <table className="w-full text-sm">
                  <thead className="bg-slate-100">
                    <tr>
                      <th className="p-2 text-left">Start</th>
                      <th className="p-2 text-left">End</th>
                      <th className="p-2 text-left">Activity</th>
                      <th className="p-2 text-left">Apparatus</th>
                      <th className="p-2 text-left">Details</th>
                      <th className="p-2 text-left">Personnel</th>
                      <th className="p-2 text-right">Minutes</th>
                      <th className="p-2 text-right">Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredEntries.length === 0 ? (
                      <tr><td colSpan={8} className="p-4 text-center text-slate-500">No entries for this date.</td></tr>
                    ) : filteredEntries.map((e) => (
                      <tr key={e.id} className="border-t">
                        <td className="p-2">{e.start}</td>
                        <td className="p-2">{e.end}</td>
                        <td className="p-2"><Badge variant="secondary">{e.activity}</Badge></td>
                        <td className="p-2">{e.apparatus}</td>
                        <td className="p-2 max-w-[360px]"><div className="truncate" title={e.details}>{e.details}</div></td>
                        <td className="p-2">{e.personnel.join(", ")}</td>
                        <td className="p-2 text-right">{minutesBetween(e.start, e.end)}</td>
                        <td className="p-2 text-right">
                          <div className="flex gap-2 justify-end">
                            <Button size="sm" variant="outline" onClick={() => editEntry(e)}>Edit</Button>
                            <Button size="sm" variant="destructive" onClick={() => deleteEntry(e.id)}><Trash2 className="w-4 h-4"/></Button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Reports Tab */}
        <TabsContent value="reports" className="space-y-4 mt-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-lg">Summary Reports</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-3">
                <Label>Range</Label>
                <Select value={reportRange} onValueChange={setReportRange}>
                  <SelectTrigger className="w-[200px]"><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="30">Last 30 days</SelectItem>
                    <SelectItem value="90">Last 90 days</SelectItem>
                    <SelectItem value="180">Last 180 days</SelectItem>
                    <SelectItem value="365">Last 365 days</SelectItem>
                  </SelectContent>
                </Select>
                <div className="ml-auto text-sm text-slate-600">Total Hours: <strong>{reportData.totalHours}</strong></div>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div className="p-3 rounded-2xl border bg-white shadow-sm">
                  <h3 className="font-semibold mb-2">Hours by Activity</h3>
                  <div className="h-72">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={reportData.actChart}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" hide={false} interval={0} angle={-20} textAnchor="end" height={70} />
                        <YAxis/>
                        <Tooltip/>
                        <Legend/>
                        <Bar dataKey="Hours" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </div>
                <div className="p-3 rounded-2xl border bg-white shadow-sm">
                  <h3 className="font-semibold mb-2">Hours by Personnel</h3>
                  <div className="h-72">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={reportData.perChart}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="name" hide={false} interval={0} angle={-20} textAnchor="end" height={70} />
                        <YAxis/>
                        <Tooltip/>
                        <Legend/>
                        <Bar dataKey="Hours" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Settings Tab */}
        <TabsContent value="settings" className="space-y-4 mt-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-lg">Reference Lists</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <ReferenceList title="Activities" items={defaultActivities} storageKey="msdl_ref_activities" />
              <ReferenceList title="Apparatus" items={defaultApparatus} storageKey="msdl_ref_apparatus" />
              <ReferenceList title="Personnel" items={defaultPersonnel} storageKey="msdl_ref_personnel" />
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <footer className="text-xs text-slate-500 py-4">MVP prototype — local-only storage. For production: add auth, role-based permissions, database (PostgreSQL), audit logs, export (CSV/PDF), and incident linkage.</footer>
    </div>
  );
}

function ReferenceList({ title, items, storageKey }: { title: string; items: string[]; storageKey: string }) {
  const [list, setList] = useState<string[]>(() => {
    const raw = localStorage.getItem(storageKey);
    return raw ? JSON.parse(raw) : items;
  });
  const [newItem, setNewItem] = useState("");

  useEffect(() => {
    localStorage.setItem(storageKey, JSON.stringify(list));
  }, [list, storageKey]);

  const add = () => {
    if (!newItem.trim()) return;
    setList((prev) => Array.from(new Set([...prev, newItem.trim()])));
    setNewItem("");
  };

  const remove = (i: number) => setList((prev) => prev.filter((_, idx) => idx !== i));

  return (
    <div className="p-3 rounded-2xl border bg-white shadow-sm">
      <h3 className="font-semibold mb-2">{title}</h3>
      <div className="flex gap-2 mb-3">
        <Input placeholder={`Add to ${title}`} value={newItem} onChange={(e) => setNewItem(e.target.value)} />
        <Button onClick={add}><Plus className="w-4 h-4 mr-1"/>Add</Button>
      </div>
      <div className="flex flex-wrap gap-2">
        {list.map((item, i) => (
          <Badge key={i} variant="secondary" className="flex items-center gap-2">
            {item}
            <button onClick={() => remove(i)} className="ml-1 border-l pl-2 text-slate-500 hover:text-slate-800">×</button>
          </Badge>
        ))}
      </div>
      <p className="mt-2 text-xs text-slate-500">These values are stored locally in your browser for this prototype.</p>
    </div>
  );
}


    </body>
</html>