"use client";

import { useCallback, useEffect, useState } from "react";
import { Percent, Plus, Trash2, Pencil } from "lucide-react";
import { api } from "@/lib/api";
import { PageHeader, Button, Badge, FormField, Input, Select } from "@/components/ui";
import { DataTable, type Column } from "@/components/data-table";
import { Modal, useConfirm } from "@/components/modal";
import { useToast } from "@/components/toast";

type Group = {
  id: string;
  name: string;
  type: string;
  value: number;
  signupBonus: number | null;
  targetSales: number | null;
  targetBonus: number | null;
  members: number;
};

const inr = (n: number) => "₹" + n.toLocaleString("en-IN");
const rate = (t: string, v: number) => (t === "PERCENT" ? v + "%" : inr(v));
const emptyForm = { name: "", type: "PERCENT", value: "", signupBonus: "", targetSales: "", targetBonus: "" };

export default function CommissionGroupsPage() {
  const toast = useToast();
  const confirm = useConfirm();
  const [rows, setRows] = useState<Group[]>([]);
  const [loading, setLoading] = useState(true);
  const [open, setOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState(emptyForm);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [saving, setSaving] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      setRows(await api.get("/admin/groups"));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const openCreate = () => {
    setEditingId(null);
    setForm(emptyForm);
    setErrors({});
    setOpen(true);
  };
  const openEdit = (g: Group) => {
    setEditingId(g.id);
    setForm({
      name: g.name,
      type: g.type,
      value: g.value.toString(),
      signupBonus: g.signupBonus?.toString() ?? "",
      targetSales: g.targetSales?.toString() ?? "",
      targetBonus: g.targetBonus?.toString() ?? "",
    });
    setErrors({});
    setOpen(true);
  };

  const submit = async () => {
    const e: Record<string, string> = {};
    if (!form.name.trim()) e.name = "Name is required.";
    if (!String(form.value).trim() || Number(form.value) < 0) e.value = "Enter a valid rate.";
    setErrors(e);
    if (Object.keys(e).length) return;

    setSaving(true);
    try {
      if (editingId) {
        await api.put(`/admin/groups/${editingId}`, form);
        toast.success(`Group “${form.name}” updated.`);
      } else {
        await api.post("/admin/groups", form);
        toast.success(`Group “${form.name}” created.`);
      }
      setOpen(false);
      load();
    } catch (err) {
      toast.error((err as Error).message);
    } finally {
      setSaving(false);
    }
  };

  const remove = async (g: Group) => {
    if (!(await confirm({ title: `Delete “${g.name}”?`, message: "Affiliates in this group will be ungrouped.", tone: "danger", confirmText: "Delete" }))) return;
    try {
      await api.del(`/admin/groups/${g.id}`);
      toast.info("Group deleted.");
      load();
    } catch (e) {
      toast.error((e as Error).message);
    }
  };

  const columns: Column<Group>[] = [
    { key: "name", header: "Group", sortable: true, accessor: (r) => r.name, render: (r) => <span className="font-medium text-gray-900">{r.name}</span> },
    { key: "value", header: "Rate", sortable: true, accessor: (r) => r.value, render: (r) => <Badge tone="brand">{rate(r.type, r.value)}</Badge> },
    { key: "signupBonus", header: "Signup bonus", align: "right", accessor: (r) => r.signupBonus ?? 0, render: (r) => (r.signupBonus == null ? "—" : inr(r.signupBonus)) },
    { key: "target", header: "Target", accessor: (r) => r.targetSales ?? 0, render: (r) => (r.targetSales == null ? "—" : `${r.targetSales} sales → ${inr(r.targetBonus ?? 0)}`) },
    { key: "members", header: "Members", sortable: true, align: "right", accessor: (r) => r.members },
    {
      key: "actions",
      header: "",
      align: "right",
      render: (r) => (
        <div className="flex justify-end gap-2">
          <Button size="sm" variant="secondary" icon={<Pencil className="h-3.5 w-3.5" />} onClick={() => openEdit(r)}>Edit</Button>
          <button onClick={() => remove(r)} className="inline-flex items-center gap-1 rounded-lg px-2 text-xs text-red-600 hover:bg-red-50">
            <Trash2 className="h-3.5 w-3.5" /> Delete
          </button>
        </div>
      ),
    },
  ];

  const inputErr = (k: string) => errors[k];

  return (
    <div>
      <PageHeader
        title="Commission Groups"
        subtitle="Group affiliates with shared rates & rewards"
        actions={<Button icon={<Plus className="h-4 w-4" />} onClick={openCreate}>New group</Button>}
      />

      <DataTable
        columns={columns}
        rows={rows}
        rowKey={(r) => r.id}
        loading={loading}
        exportName="commission-groups"
        searchPlaceholder="Search groups…"
        empty={{ icon: <Percent className="h-6 w-6" />, title: "No commission groups", description: "Create groups like ‘Nano’ or ‘Mega Influencer’ with their own rates.", action: <Button size="sm" icon={<Plus className="h-4 w-4" />} onClick={openCreate}>New group</Button> }}
      />

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title={editingId ? "Edit commission group" : "New commission group"}
        footer={
          <>
            <Button variant="secondary" onClick={() => setOpen(false)}>Cancel</Button>
            <Button onClick={submit} loading={saving}>{editingId ? "Save changes" : "Create group"}</Button>
          </>
        }
      >
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="sm:col-span-2">
            <FormField label="Name" required error={inputErr("name")}>
              <Input error={!!inputErr("name")} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Mega Influencer" />
            </FormField>
          </div>
          <FormField label="Type">
            <Select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })}>
              <option value="PERCENT">Percent</option>
              <option value="FLAT">Flat</option>
            </Select>
          </FormField>
          <FormField label="Rate" required error={inputErr("value")}>
            <Input type="number" min={0} error={!!inputErr("value")} value={form.value} onChange={(e) => setForm({ ...form, value: e.target.value })} />
          </FormField>
          <FormField label="Signup bonus (₹)">
            <Input type="number" min={0} value={form.signupBonus} onChange={(e) => setForm({ ...form, signupBonus: e.target.value })} />
          </FormField>
          <FormField label="Target sales">
            <Input type="number" min={0} value={form.targetSales} onChange={(e) => setForm({ ...form, targetSales: e.target.value })} />
          </FormField>
          <div className="sm:col-span-2">
            <FormField label="Target bonus (₹)" hint="Paid when the affiliate hits the target sales">
              <Input type="number" min={0} value={form.targetBonus} onChange={(e) => setForm({ ...form, targetBonus: e.target.value })} />
            </FormField>
          </div>
        </div>
      </Modal>
    </div>
  );
}