"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";
import { useLocalStorage } from "@/lib/hooks/use-local-storage";

export interface EntityOverride {
  ein?: string;
  ncSosFileNumber?: string;
  formationDate?: string;
  website?: string;
  instagram?: string;
  facebook?: string;
  tiktok?: string;
  x?: string;
  notes?: string;
}

interface Props {
  slug: string;
}

export function EntityEditor({ slug }: Props) {
  const [overrides, setOverrides] = useLocalStorage<Record<string, EntityOverride>>("sag.entity.overrides", {});
  const [open, setOpen] = useState(false);
  const current = overrides[slug] ?? {};
  const [form, setForm] = useState<EntityOverride>(current);

  function save() {
    const cleaned: EntityOverride = {};
    (Object.keys(form) as (keyof EntityOverride)[]).forEach((k) => {
      const v = form[k];
      if (v && v.trim() !== "") cleaned[k] = v.trim();
    });
    setOverrides({ ...overrides, [slug]: cleaned });
    setOpen(false);
  }

  function clear() {
    const next = { ...overrides };
    delete next[slug];
    setOverrides(next);
    setForm({});
  }

  if (!open) {
    const filled = Object.values(current).filter(Boolean).length;
    return (
      <Card>
        <CardContent className="p-4 flex items-center justify-between gap-3">
          <div>
            <div className="text-sm font-medium">Edit entity details</div>
            <div className="text-xs text-muted-foreground">
              {filled > 0 ? `${filled} field${filled === 1 ? "" : "s"} saved locally` : "EIN, NC SoS, website, social — saved on this device"}
            </div>
          </div>
          <Button size="sm" variant="outline" onClick={() => { setForm(current); setOpen(true); }}>
            {filled > 0 ? "Edit" : "Add details"}
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardContent className="p-5 space-y-3">
        <h4 className="text-sm font-semibold">Entity details</h4>
        <Field label="EIN (last 4 ok)">
          <Input value={form.ein ?? ""} onChange={(e) => setForm({ ...form, ein: e.target.value })} placeholder="XX-XXXXXXX or last 4" />
        </Field>
        <Field label="NC SoS file number">
          <Input value={form.ncSosFileNumber ?? ""} onChange={(e) => setForm({ ...form, ncSosFileNumber: e.target.value })} placeholder="e.g. 1234567" />
        </Field>
        <Field label="Formation date">
          <Input type="date" value={form.formationDate ?? ""} onChange={(e) => setForm({ ...form, formationDate: e.target.value })} />
        </Field>
        <Field label="Website">
          <Input value={form.website ?? ""} onChange={(e) => setForm({ ...form, website: e.target.value })} placeholder="https://..." />
        </Field>
        <div className="grid grid-cols-2 gap-3">
          <Field label="Instagram">
            <Input value={form.instagram ?? ""} onChange={(e) => setForm({ ...form, instagram: e.target.value })} placeholder="@handle" />
          </Field>
          <Field label="Facebook">
            <Input value={form.facebook ?? ""} onChange={(e) => setForm({ ...form, facebook: e.target.value })} placeholder="page name" />
          </Field>
          <Field label="TikTok">
            <Input value={form.tiktok ?? ""} onChange={(e) => setForm({ ...form, tiktok: e.target.value })} placeholder="@handle" />
          </Field>
          <Field label="X / Twitter">
            <Input value={form.x ?? ""} onChange={(e) => setForm({ ...form, x: e.target.value })} placeholder="@handle" />
          </Field>
        </div>
        <Field label="Notes">
          <textarea
            value={form.notes ?? ""}
            onChange={(e) => setForm({ ...form, notes: e.target.value })}
            className="w-full rounded-md border border-input bg-background p-2 text-sm"
            rows={3}
          />
        </Field>
        <div className="flex items-center justify-between pt-1">
          <Button variant="ghost" size="sm" onClick={clear}>Clear all</Button>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" onClick={() => setOpen(false)}>Cancel</Button>
            <Button variant="brand" size="sm" onClick={save}>Save</Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="text-xs text-muted-foreground">{label}</label>
      <div className="mt-1">{children}</div>
    </div>
  );
}