import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "sonner";
import { Trash2, Plus } from "lucide-react";

export const Route = createFileRoute("/admin/payment-channels")({ component: PaymentChannels });

type Channel = {
  id: string;
  name: string;
  kind: "till" | "paybill" | "bank" | "other";
  till_number: string | null;
  paybill_number: string | null;
  account_number: string | null;
  account_name: string | null;
  instructions: string | null;
  is_active: boolean;
  sort_order: number;
};

const empty: Omit<Channel, "id"> = {
  name: "", kind: "till", till_number: "", paybill_number: "", account_number: "",
  account_name: "", instructions: "", is_active: true, sort_order: 0,
};

function PaymentChannels() {
  const [rows, setRows] = useState<Channel[]>([]);
  const [creating, setCreating] = useState(false);
  const [draft, setDraft] = useState<Omit<Channel, "id">>(empty);

  const load = async () => {
    const { data, error } = await supabase.from("payment_channels").select("*").order("sort_order").order("created_at");
    if (error) return toast.error(error.message);
    setRows((data ?? []) as Channel[]);
  };
  useEffect(() => { load(); }, []);

  const save = async (id: string, patch: Partial<Channel>) => {
    const { error } = await supabase.from("payment_channels").update(patch).eq("id", id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
  };
  const remove = async (id: string) => {
    if (!confirm("Delete this channel?")) return;
    const { error } = await supabase.from("payment_channels").delete().eq("id", id);
    if (error) return toast.error(error.message);
    setRows((rs) => rs.filter((r) => r.id !== id));
  };
  const create = async () => {
    if (!draft.name.trim()) return toast.error("Name required");
    const { error } = await supabase.from("payment_channels").insert(draft);
    if (error) return toast.error(error.message);
    toast.success("Channel added");
    setDraft(empty); setCreating(false); load();
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Payment channels</h1>
          <p className="text-sm text-muted-foreground">M-PESA tills, paybills, and bank details shown to customers.</p>
        </div>
        <Button size="sm" onClick={() => setCreating((v) => !v)}><Plus className="mr-1 h-4 w-4" /> New channel</Button>
      </div>

      {creating && (
        <Card>
          <CardHeader><CardTitle>Add channel</CardTitle></CardHeader>
          <CardContent className="grid gap-3 sm:grid-cols-2">
            <Field label="Name"><Input value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} /></Field>
            <Field label="Kind">
              <Select value={draft.kind} onValueChange={(v) => setDraft({ ...draft, kind: v as Channel["kind"] })}>
                <SelectTrigger><SelectValue/></SelectTrigger>
                <SelectContent>
                  <SelectItem value="till">Buy Goods (Till)</SelectItem>
                  <SelectItem value="paybill">Paybill</SelectItem>
                  <SelectItem value="bank">Bank</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
            </Field>
            <Field label="Till number"><Input value={draft.till_number ?? ""} onChange={(e) => setDraft({ ...draft, till_number: e.target.value })} /></Field>
            <Field label="Paybill"><Input value={draft.paybill_number ?? ""} onChange={(e) => setDraft({ ...draft, paybill_number: e.target.value })} /></Field>
            <Field label="Account number"><Input value={draft.account_number ?? ""} onChange={(e) => setDraft({ ...draft, account_number: e.target.value })} /></Field>
            <Field label="Paid to (account name)"><Input value={draft.account_name ?? ""} onChange={(e) => setDraft({ ...draft, account_name: e.target.value })} /></Field>
            <div className="sm:col-span-2"><Field label="Instructions"><Textarea rows={3} value={draft.instructions ?? ""} onChange={(e) => setDraft({ ...draft, instructions: e.target.value })} /></Field></div>
            <Field label="Sort order"><Input type="number" value={draft.sort_order} onChange={(e) => setDraft({ ...draft, sort_order: Number(e.target.value) })} /></Field>
            <div className="flex items-center gap-2 pt-6">
              <Switch checked={draft.is_active} onCheckedChange={(v) => setDraft({ ...draft, is_active: v })} /> <span className="text-sm">Active</span>
            </div>
            <div className="sm:col-span-2 flex justify-end gap-2">
              <Button variant="outline" onClick={() => { setCreating(false); setDraft(empty); }}>Cancel</Button>
              <Button onClick={create}>Save</Button>
            </div>
          </CardContent>
        </Card>
      )}

      <div className="grid gap-3">
        {rows.length === 0 && <p className="text-sm text-muted-foreground">No channels yet.</p>}
        {rows.map((r) => (
          <Card key={r.id}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-base">{r.name}</CardTitle>
              <div className="flex items-center gap-3">
                <div className="flex items-center gap-2 text-xs"><Switch checked={r.is_active} onCheckedChange={(v) => save(r.id, { is_active: v })} /> Active</div>
                <Button variant="ghost" size="icon" onClick={() => remove(r.id)}><Trash2 className="h-4 w-4 text-destructive" /></Button>
              </div>
            </CardHeader>
            <CardContent className="grid gap-3 sm:grid-cols-2">
              <Field label="Name"><Input defaultValue={r.name} onBlur={(e) => save(r.id, { name: e.target.value })} /></Field>
              <Field label="Kind">
                <Select value={r.kind} onValueChange={(v) => save(r.id, { kind: v as Channel["kind"] })}>
                  <SelectTrigger><SelectValue/></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="till">Buy Goods (Till)</SelectItem>
                    <SelectItem value="paybill">Paybill</SelectItem>
                    <SelectItem value="bank">Bank</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </Field>
              <Field label="Till number"><Input defaultValue={r.till_number ?? ""} onBlur={(e) => save(r.id, { till_number: e.target.value || null })} /></Field>
              <Field label="Paybill"><Input defaultValue={r.paybill_number ?? ""} onBlur={(e) => save(r.id, { paybill_number: e.target.value || null })} /></Field>
              <Field label="Account number"><Input defaultValue={r.account_number ?? ""} onBlur={(e) => save(r.id, { account_number: e.target.value || null })} /></Field>
              <Field label="Paid to (account name)"><Input defaultValue={r.account_name ?? ""} onBlur={(e) => save(r.id, { account_name: e.target.value || null })} /></Field>
              <div className="sm:col-span-2"><Field label="Instructions"><Textarea rows={3} defaultValue={r.instructions ?? ""} onBlur={(e) => save(r.id, { instructions: e.target.value || null })} /></Field></div>
              <Field label="Sort order"><Input type="number" defaultValue={r.sort_order} onBlur={(e) => save(r.id, { sort_order: Number(e.target.value) })} /></Field>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

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