import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { services as catalog } from "@/lib/services";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Search, Save } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/services")({ component: ServicesAdmin });

type Override = { slug: string; price: string | null; is_available: boolean; description_override: string | null };

function ServicesAdmin() {
  const [overrides, setOverrides] = useState<Record<string, Override>>({});
  const [q, setQ] = useState("");
  const [category, setCategory] = useState<string>("All");

  const load = async () => {
    const { data } = await supabase.from("service_overrides").select("slug, price, is_available, description_override");
    const map: Record<string, Override> = {};
    (data ?? []).forEach((o) => { map[o.slug] = o as Override; });
    setOverrides(map);
  };
  useEffect(() => { load(); }, []);

  const categories = useMemo(() => ["All", ...Array.from(new Set(catalog.map((s) => s.category)))], []);
  const filtered = catalog.filter((s) => {
    if (category !== "All" && s.category !== category) return false;
    if (!q) return true;
    return s.name.toLowerCase().includes(q.toLowerCase());
  });

  const upsert = async (slug: string, patch: Partial<Override>) => {
    const current = overrides[slug] ?? { slug, price: null, is_available: true, description_override: null };
    const next: Override = { ...current, ...patch, slug };
    setOverrides((m) => ({ ...m, [slug]: next }));
    const { error } = await supabase.from("service_overrides").upsert(next, { onConflict: "slug" });
    if (error) toast.error(error.message);
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Services</h1>
        <p className="text-sm text-muted-foreground">Override pricing and availability for any service.</p>
      </div>
      <Card className="glass">
        <CardHeader>
          <div className="flex flex-wrap items-center gap-2">
            <div className="flex flex-1 items-center gap-2">
              <Search className="h-4 w-4 text-muted-foreground" />
              <Input placeholder="Search services" value={q} onChange={(e) => setQ(e.target.value)} />
            </div>
            <select
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              className="rounded-md border bg-background px-3 py-2 text-sm"
            >
              {categories.map((c) => <option key={c}>{c}</option>)}
            </select>
          </div>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="text-left text-xs uppercase text-muted-foreground">
                <tr>
                  <th className="py-2 pr-4">Service</th>
                  <th className="py-2 pr-4">Category</th>
                  <th className="py-2 pr-4">Default price</th>
                  <th className="py-2 pr-4">Override price</th>
                  <th className="py-2 pr-4">Available</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((s) => {
                  const o = overrides[s.slug];
                  const available = o ? o.is_available : true;
                  return (
                    <tr key={s.slug} className="border-t">
                      <td className="py-2 pr-4 font-medium">{s.name}</td>
                      <td className="py-2 pr-4 text-muted-foreground">{s.category}</td>
                      <td className="py-2 pr-4 text-muted-foreground">{s.price}</td>
                      <td className="py-2 pr-4">
                        <PriceEditor value={o?.price ?? ""} onSave={(v) => upsert(s.slug, { price: v || null })} />
                      </td>
                      <td className="py-2 pr-4">
                        <Switch checked={available} onCheckedChange={(v) => upsert(s.slug, { is_available: v })} />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

function PriceEditor({ value, onSave }: { value: string; onSave: (v: string) => void }) {
  const [v, setV] = useState(value);
  useEffect(() => setV(value), [value]);
  return (
    <div className="flex items-center gap-1">
      <Input value={v} onChange={(e) => setV(e.target.value)} placeholder="e.g. KES 500" className="h-8 w-36" />
      <Button size="icon" variant="ghost" onClick={() => onSave(v.trim())}>
        <Save className="h-4 w-4" />
      </Button>
    </div>
  );
}