"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { CheckCircle2, Clock3, History, Receipt, Sparkles, Wallet } from "lucide-react";
import { PageHeader } from "@/components/ui/page-header";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

type StatementItem = {
  id: string;
  statement_type: string;
  amount: number;
  included_in_payout: boolean;
  seller_email: string | null;
  seller_role: string | null;
  period:
    | {
        id: string;
        period_label: string;
        start_date: string;
        end_date: string;
        status: string;
      }
    | null;
  event:
    | {
        id: string;
        source_date: string;
        status: string;
        commission_percent: number | null;
        commission_amount: number;
        notes: string | null;
      }
    | null;
};

type StatementResponse = {
  summary: {
    total_amount: number;
    payout_eligible_amount: number;
    item_count: number;
  };
  items: StatementItem[];
};

type PayoutItem = {
  id: string;
  net_amount: number;
  status: string;
  created_at: string;
  period:
    | {
        id: string;
        period_label: string;
        start_date: string;
        end_date: string;
        status: string;
      }
    | null;
  payable:
    | {
        id: string;
        description: string;
        due_date: string | null;
        payment_date: string | null;
        status: string;
        amount: number;
      }
    | null;
};

type EventItem = {
  id: string;
  source_date: string;
  status: string;
  order_number: number | null;
  gross_basis_amount: number;
  commission_percent: number | null;
  commission_amount: number;
  notes: string | null;
};

async function fetchJson<T>(url: string) {
  const response = await fetch(url, {
    cache: "no-store",
    headers: { "content-type": "application/json" },
  });
  const json = (await response.json().catch(() => null)) as (T & { error?: string }) | null;
  if (!response.ok) {
    throw new Error(json?.error || "Falha ao carregar dados.");
  }
  return json as T;
}

function formatCurrency(value: number) {
  return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(Number(value || 0));
}

function formatDate(value: string | null | undefined) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat("pt-BR").format(date);
}

function translateStatus(status: string | null | undefined) {
  switch (status) {
    case "calculated":
      return "Pronto para fechar";
    case "pending_source":
      return "Falta configurar";
    case "blocked":
      return "Precisa revisar";
    case "reversed":
      return "Estornado";
    case "closed":
      return "Fechado";
    case "paid":
    case "PAID":
      return "Pago";
    case "approved":
      return "Aprovado";
    case "payable_created":
      return "Conta criada";
    case "partially_paid":
      return "Pago em parte";
    case "PENDING":
      return "Aguardando pagamento";
    case "CANCELED":
      return "Cancelado";
    default:
      return status || "-";
  }
}

function translateStatementType(type: string | null | undefined) {
  switch (type) {
    case "event":
      return "Comissão";
    case "adjustment":
      return "Ajuste";
    case "carry_over":
      return "Saldo anterior";
    default:
      return type || "-";
  }
}

function getStatusTone(status: string | null | undefined) {
  switch (status) {
    case "paid":
    case "PAID":
    case "approved":
      return "bg-emerald-50 text-emerald-700 border border-emerald-200";
    case "pending_source":
    case "PENDING":
      return "bg-amber-50 text-amber-700 border border-amber-200";
    case "blocked":
    case "reversed":
    case "CANCELED":
      return "bg-rose-50 text-rose-700 border border-rose-200";
    default:
      return "bg-slate-100 text-slate-700 border border-slate-200";
  }
}

export default function MyCommissionsPage() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [activeTab, setActiveTab] = useState("resumo");
  const [statement, setStatement] = useState<StatementResponse>({
    summary: { total_amount: 0, payout_eligible_amount: 0, item_count: 0 },
    items: [],
  });
  const [payouts, setPayouts] = useState<PayoutItem[]>([]);
  const [events, setEvents] = useState<EventItem[]>([]);

  const loadAll = useCallback(async () => {
    try {
      setLoading(true);
      setError("");
      const scope = "self_only=1";
      const [statementRes, payoutsRes, eventsRes] = await Promise.all([
        fetchJson<StatementResponse>(`/api/commissions/statement?${scope}`),
        fetchJson<{ payouts: PayoutItem[] }>(`/api/commissions/payouts?${scope}`),
        fetchJson<{ events: EventItem[] }>(`/api/commissions/events?${scope}`),
      ]);
      setStatement(statementRes);
      setPayouts(payoutsRes.payouts || []);
      setEvents(eventsRes.events || []);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Falha ao carregar comissões.");
    } finally {
      setLoading(false);
    }
  }, []);

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

  const stats = useMemo(
    () => ({
      total: statement.summary.total_amount,
      payoutEligible: statement.summary.payout_eligible_amount,
      paidCount: payouts.filter((payout) => payout.status === "paid" || payout.status === "PAID").length,
      pendingCount: payouts.filter((payout) => payout.status === "PENDING").length,
    }),
    [payouts, statement.summary]
  );

  const nextStep = useMemo(() => {
    if (statement.items.length && !payouts.length) {
      return {
        title: "Suas comissões já aparecem no extrato",
        description: "Agora é só acompanhar quando esse valor for separado para pagamento.",
        tab: "extrato",
      };
    }

    if (payouts.some((payout) => payout.status === "PENDING")) {
      return {
        title: "Seu pagamento está em andamento",
        description: "Acompanhe a aba de pagamentos para saber quando a quitação for concluída.",
        tab: "pagamentos",
      };
    }

    if (payouts.some((payout) => payout.status === "paid" || payout.status === "PAID")) {
      return {
        title: "Você já tem pagamento recebido",
        description: "Confira os detalhes do valor pago e consulte o histórico quando quiser.",
        tab: "pagamentos",
      };
    }

    return {
      title: "Assim que houver comissão calculada, ela aparece aqui",
      description: "Você poderá acompanhar o extrato, os pagamentos e o histórico em um só lugar.",
      tab: "historico",
    };
  }, [payouts, statement.items.length]);

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Área do Funcionário"
        title="Minhas Comissões"
        subtitle="Tudo organizado de forma simples para você entender quanto entrou, o que vai ser pago e o que já foi pago."
        actions={
          <Button variant="outline" onClick={loadAll} disabled={loading}>
            Atualizar
          </Button>
        }
      />

      {error ? (
        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error}</div>
      ) : null}

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-[1.4fr_1fr]">
        <section className="ks-surface rounded-2xl p-6">
          <div className="inline-flex items-center gap-2 rounded-full bg-[rgba(123,97,255,0.08)] px-3 py-1 text-xs font-semibold text-[var(--ks-color-primary)]">
            <Sparkles size={14} />
            Próximo passo
          </div>
          <h2 className="mt-4 text-2xl font-semibold text-[var(--ks-color-text-primary)]">{nextStep.title}</h2>
          <p className="mt-2 max-w-2xl text-sm text-[var(--ks-color-text-muted)]">{nextStep.description}</p>
          <div className="mt-4 flex flex-wrap items-center gap-3">
            <Button type="button" onClick={() => setActiveTab(nextStep.tab)}>
              Abrir agora
            </Button>
            <div className="text-sm text-[var(--ks-color-text-muted)]">
              Ordem sugerida: ver extrato, acompanhar pagamento e consultar histórico quando precisar.
            </div>
          </div>
        </section>

        <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-1">
          <div className="ks-surface rounded-2xl p-5">
            <div className="mb-2 flex items-center gap-2 text-sm font-medium text-[var(--ks-color-text-muted)]">
              <Wallet size={16} />
              Total no extrato
            </div>
            <div className="text-2xl font-bold text-[var(--ks-color-text-primary)]">{formatCurrency(stats.total)}</div>
          </div>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-2">
            <div className="ks-surface rounded-2xl p-5">
              <div className="mb-2 flex items-center gap-2 text-sm font-medium text-[var(--ks-color-text-muted)]">
                <Receipt size={16} />
                Valor separado para pagamento
              </div>
              <div className="text-2xl font-bold text-[var(--ks-color-text-primary)]">{formatCurrency(stats.payoutEligible)}</div>
            </div>
            <div className="ks-surface rounded-2xl p-5">
              <div className="mb-2 flex items-center gap-2 text-sm font-medium text-[var(--ks-color-text-muted)]">
                <Clock3 size={16} />
                Pagamentos recebidos
              </div>
              <div className="text-2xl font-bold text-[var(--ks-color-text-primary)]">{stats.paidCount}</div>
            </div>
          </div>
        </section>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="h-auto w-full flex-wrap justify-start gap-2 rounded-2xl bg-transparent p-0">
          {[
            { value: "resumo", label: "Resumo" },
            { value: "extrato", label: "Extrato" },
            { value: "pagamentos", label: "Pagamentos" },
            { value: "historico", label: "Histórico" },
          ].map((tab) => (
            <TabsTrigger
              key={tab.value}
              value={tab.value}
              className="rounded-xl border border-slate-200 bg-white px-4 py-2.5 data-[state=active]:border-[var(--ks-color-primary)] data-[state=active]:text-[var(--ks-color-primary)]"
            >
              {tab.label}
            </TabsTrigger>
          ))}
        </TabsList>

        <TabsContent value="resumo" className="space-y-6">
          <section className="ks-surface rounded-2xl p-6">
            <div className="mb-5">
              <h2 className="text-xl font-semibold text-[var(--ks-color-text-primary)]">Como acompanhar</h2>
              <p className="text-sm text-[var(--ks-color-text-muted)]">
                Esta área mostra suas comissões em uma ordem simples, para você saber onde olhar em cada momento.
              </p>
            </div>
            <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
              {[
                {
                  icon: Receipt,
                  title: "1. Veja o extrato",
                  text: "Aqui aparece tudo que entrou na sua comissão.",
                  tab: "extrato",
                },
                {
                  icon: CheckCircle2,
                  title: "2. Acompanhe o pagamento",
                  text: "Confira quando o valor virar pagamento e quando for quitado.",
                  tab: "pagamentos",
                },
                {
                  icon: History,
                  title: "3. Consulte o histórico",
                  text: "Revise os lançamentos gerados pelo sistema para suas vendas.",
                  tab: "historico",
                },
              ].map((item) => (
                <button
                  key={item.title}
                  type="button"
                  onClick={() => setActiveTab(item.tab)}
                  className="rounded-2xl border border-slate-200 bg-white p-5 text-left transition hover:border-[var(--ks-color-primary)]/40 hover:shadow-sm"
                >
                  <div className="mb-3 inline-flex rounded-xl bg-[rgba(123,97,255,0.08)] p-3 text-[var(--ks-color-primary)]">
                    <item.icon size={18} />
                  </div>
                  <h3 className="font-semibold text-[var(--ks-color-text-primary)]">{item.title}</h3>
                  <p className="mt-2 text-sm text-[var(--ks-color-text-muted)]">{item.text}</p>
                </button>
              ))}
            </div>
            <div className="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
              <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
                <div className="text-xs text-[var(--ks-color-text-muted)]">Itens no extrato</div>
                <div className="mt-1 font-semibold text-[var(--ks-color-text-primary)]">{statement.summary.item_count}</div>
              </div>
              <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
                <div className="text-xs text-[var(--ks-color-text-muted)]">Pagamentos aguardando</div>
                <div className="mt-1 font-semibold text-[var(--ks-color-text-primary)]">{stats.pendingCount}</div>
              </div>
              <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
                <div className="text-xs text-[var(--ks-color-text-muted)]">Pagamentos concluídos</div>
                <div className="mt-1 font-semibold text-[var(--ks-color-text-primary)]">{stats.paidCount}</div>
              </div>
            </div>
          </section>
        </TabsContent>

        <TabsContent value="extrato" className="space-y-6">
          <section className="ks-surface rounded-2xl p-6">
            <div className="mb-4">
              <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Meu extrato</h2>
              <p className="text-sm text-[var(--ks-color-text-muted)]">
                Aqui você vê o que entrou na sua comissão e se esse valor já foi separado para pagamento.
              </p>
            </div>

            <div className="overflow-x-auto">
              <table className="min-w-full text-sm">
                <thead>
                  <tr className="border-b border-slate-200 text-left text-[var(--ks-color-text-muted)]">
                    <th className="px-3 py-2">Período</th>
                    <th className="px-3 py-2">Data</th>
                    <th className="px-3 py-2">Tipo</th>
                    <th className="px-3 py-2">Valor</th>
                    <th className="px-3 py-2">Separado para pagamento?</th>
                    <th className="px-3 py-2">Observação</th>
                  </tr>
                </thead>
                <tbody>
                  {statement.items.map((item) => (
                    <tr key={item.id} className="border-b border-slate-100">
                      <td className="px-3 py-2">{item.period?.period_label || "-"}</td>
                      <td className="px-3 py-2">{formatDate(item.event?.source_date)}</td>
                      <td className="px-3 py-2">{translateStatementType(item.statement_type)}</td>
                      <td className="px-3 py-2 font-medium text-[var(--ks-color-text-primary)]">{formatCurrency(item.amount)}</td>
                      <td className="px-3 py-2">{item.included_in_payout ? "Sim" : "Ainda não"}</td>
                      <td className="px-3 py-2 text-xs text-[var(--ks-color-text-muted)]">{item.event?.notes || "-"}</td>
                    </tr>
                  ))}
                  {!statement.items.length && !loading ? (
                    <tr>
                      <td colSpan={6} className="px-3 py-6 text-center text-sm text-slate-500">
                        Ainda não há itens no seu extrato.
                      </td>
                    </tr>
                  ) : null}
                </tbody>
              </table>
            </div>
          </section>
        </TabsContent>

        <TabsContent value="pagamentos" className="space-y-6">
          <section className="ks-surface rounded-2xl p-6">
            <div className="mb-4">
              <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Meus pagamentos</h2>
              <p className="text-sm text-[var(--ks-color-text-muted)]">
                Acompanhe quando sua comissão vira pagamento e quando o financeiro conclui a quitação.
              </p>
            </div>

            <div className="overflow-x-auto">
              <table className="min-w-full text-sm">
                <thead>
                  <tr className="border-b border-slate-200 text-left text-[var(--ks-color-text-muted)]">
                    <th className="px-3 py-2">Período</th>
                    <th className="px-3 py-2">Valor</th>
                    <th className="px-3 py-2">Situação</th>
                    <th className="px-3 py-2">Lançamento financeiro</th>
                    <th className="px-3 py-2">Pagamento</th>
                  </tr>
                </thead>
                <tbody>
                  {payouts.map((payout) => (
                    <tr key={payout.id} className="border-b border-slate-100">
                      <td className="px-3 py-2">{payout.period?.period_label || "-"}</td>
                      <td className="px-3 py-2 font-medium text-[var(--ks-color-text-primary)]">{formatCurrency(payout.net_amount)}</td>
                      <td className="px-3 py-2">
                        <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${getStatusTone(payout.status)}`}>
                          {translateStatus(payout.status)}
                        </span>
                      </td>
                      <td className="px-3 py-2">{payout.payable?.description || "-"}</td>
                      <td className="px-3 py-2">
                        {payout.payable?.payment_date ? `Pago em ${formatDate(payout.payable.payment_date)}` : "Aguardando quitação"}
                      </td>
                    </tr>
                  ))}
                  {!payouts.length && !loading ? (
                    <tr>
                      <td colSpan={5} className="px-3 py-6 text-center text-sm text-slate-500">
                        Ainda não há pagamentos gerados para você.
                      </td>
                    </tr>
                  ) : null}
                </tbody>
              </table>
            </div>
          </section>
        </TabsContent>

        <TabsContent value="historico" className="space-y-6">
          <section className="ks-surface rounded-2xl p-6">
            <div className="mb-4">
              <h2 className="text-lg font-semibold text-[var(--ks-color-text-primary)]">Histórico das comissões</h2>
              <p className="text-sm text-[var(--ks-color-text-muted)]">
                Veja os lançamentos gerados pelo sistema a partir dos seus recebimentos.
              </p>
            </div>

            <div className="overflow-x-auto">
              <table className="min-w-full text-sm">
                <thead>
                  <tr className="border-b border-slate-200 text-left text-[var(--ks-color-text-muted)]">
                    <th className="px-3 py-2">Data</th>
                    <th className="px-3 py-2">Pedido</th>
                    <th className="px-3 py-2">Base</th>
                    <th className="px-3 py-2">% Comissão</th>
                    <th className="px-3 py-2">Valor</th>
                    <th className="px-3 py-2">Situação</th>
                  </tr>
                </thead>
                <tbody>
                  {events.map((event) => (
                    <tr key={event.id} className="border-b border-slate-100">
                      <td className="px-3 py-2">{formatDate(event.source_date)}</td>
                      <td className="px-3 py-2">{event.order_number ? `#${event.order_number}` : "-"}</td>
                      <td className="px-3 py-2">{formatCurrency(event.gross_basis_amount)}</td>
                      <td className="px-3 py-2">{event.commission_percent ? `${event.commission_percent}%` : "-"}</td>
                      <td className="px-3 py-2 font-medium text-[var(--ks-color-text-primary)]">{formatCurrency(event.commission_amount)}</td>
                      <td className="px-3 py-2">
                        <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${getStatusTone(event.status)}`}>
                          {translateStatus(event.status)}
                        </span>
                      </td>
                    </tr>
                  ))}
                  {!events.length && !loading ? (
                    <tr>
                      <td colSpan={6} className="px-3 py-6 text-center text-sm text-slate-500">
                        Ainda não há histórico de comissão para você.
                      </td>
                    </tr>
                  ) : null}
                </tbody>
              </table>
            </div>
          </section>
        </TabsContent>
      </Tabs>
    </div>
  );
}