"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Gift, Sparkles, Coins, Receipt, Server, Scale, Settings, Plus } from "lucide-react";
import { useRepositories } from "@/di/repository-provider";
import { useApiQuery } from "@/presentation/hooks/use-api-query";
import { useApiMutation } from "@/presentation/hooks/use-api-mutation";
import { useT, useLocale } from "@/shared/i18n/client";
import StatsCard from "@/presentation/components/shared/stats-card";
import { Button } from "@/presentation/components/ui/button";
import { Input } from "@/presentation/components/ui/input";
import { Badge } from "@/presentation/components/ui/badge";
import { Card, CardContent } from "@/presentation/components/ui/card";
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/presentation/components/ui/table";
import { DonnaClientDialog } from "@/presentation/components/donna/donna-client-dialog";
import { DonnaAddClientDialog } from "@/presentation/components/donna/donna-add-client-dialog";
import ConfirmationDialog from "@/presentation/components/shared/confirmation-dialog";
import { DonnaSettingsDialog } from "@/presentation/components/donna/donna-settings-dialog";
import type { DonnaUsageClientRow } from "@/domain/entities/donna";

const currentMonth = () => new Date().toISOString().slice(0, 7);

export function DonnaTab() {
  const t = useT();
  const locale = useLocale();
  const repo = useRepositories().donnaRepository;
  const [month, setMonth] = useState(currentMonth());
  const [search, setSearch] = useState("");
  const [openId, setOpenId] = useState<number | null>(null);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [addOpen, setAddOpen] = useState(false);
  const [removing, setRemoving] = useState<DonnaUsageClientRow | null>(null);

  const { data, loading, refetch } = useApiQuery(
    () => repo.getUsage({ month, search: search || undefined }),
    { deps: [month, search] }
  );

  const money = (amount: number, digits = 2) =>
    new Intl.NumberFormat(locale === "fr" ? "fr-FR" : "en-US", {
      style: "currency",
      currency: "EUR",
      minimumFractionDigits: digits,
      maximumFractionDigits: digits,
    }).format(amount);

  const grantAll = useApiMutation(() => repo.grantAll(), {
    onSuccess: (done) => {
      toast.success(t.donna.grantedAll(done.granted, money(done.amount_eur)));
      refetch();
    },
  });

  const remove = useApiMutation(() => repo.removeClient((removing as DonnaUsageClientRow).company.id), {
    successMessage: t.donna.removed,
    onSuccess: () => {
      setRemoving(null);
      refetch();
    },
  });

  const totals = data?.totals;

  return (
    <div className="space-y-6">
      {data && (
        <p className="text-sm text-muted-foreground">
          {t.donna.intro(`${data.markup}`, `${Math.round(data.gift_rate * 100)} %`)}
          {!data.gift_enabled && <span className="ml-2 font-medium text-amber-600">{t.donna.giftOff}</span>}
        </p>
      )}

      <div className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-6">
        <StatsCard title={t.donna.stats.gifts} value={money(totals?.gift_eur ?? 0)} icon={Gift} accent="purple" />
        <StatsCard title={t.donna.stats.donnaUsed} value={money(totals?.donna_price_eur ?? 0)} icon={Sparkles} accent="blue" />
        <StatsCard title={t.donna.stats.donnaCost} value={money(totals?.donna_cost_eur ?? 0)} icon={Coins} accent="amber" />
        <StatsCard title={t.donna.stats.overage} value={money(totals?.overage_eur ?? 0)} icon={Receipt} accent="green" />
        <StatsCard
          title={t.donna.stats.platformCost}
          value={money(totals?.platform_cost_eur ?? 0)}
          subtitle={totals && totals.unassigned_cost_eur > 0 ? t.donna.stats.unassigned(money(totals.unassigned_cost_eur)) : undefined}
          icon={Server}
          accent="cyan"
        />
        <StatsCard
          title={t.donna.stats.net}
          value={money(totals?.net_eur ?? 0)}
          subtitle={t.donna.stats.netHint}
          icon={Scale}
          accent={(totals?.net_eur ?? 0) < 0 ? "red" : "green"}
        />
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <label className="flex items-center gap-2 text-sm">
          {t.donna.month}
          <Input type="month" value={month} onChange={(e) => e.target.value && setMonth(e.target.value)} className="w-44" />
        </label>
        <Input
          placeholder={t.donna.searchPlaceholder}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="max-w-xs"
        />
        <div className="ml-auto flex gap-2">
          <Button onClick={() => setAddOpen(true)}>
            <Plus className="mr-2 h-4 w-4" />
            {t.donna.addClient}
          </Button>
          <Button
            variant="outline"
            disabled={grantAll.loading || month !== currentMonth() || !data?.gift_enabled}
            onClick={() => grantAll.mutate(undefined)}
          >
            <Gift className="mr-2 h-4 w-4" />
            {t.donna.grantAll}
          </Button>
          <Button variant="outline" onClick={() => setSettingsOpen(true)}>
            <Settings className="mr-2 h-4 w-4" />
            {t.donna.settings.button}
          </Button>
        </div>
      </div>

      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>{t.donna.columns.client}</TableHead>
                <TableHead>{t.donna.columns.pricePerVehicle}</TableHead>
                <TableHead className="text-right">{t.donna.columns.gift}</TableHead>
                <TableHead className="text-right">{t.donna.columns.donna}</TableHead>
                <TableHead className="text-right">{t.donna.columns.overage}</TableHead>
                <TableHead className="text-right">{t.donna.columns.cost}</TableHead>
                <TableHead className="text-right">{t.donna.columns.platform}</TableHead>
                <TableHead className="text-right">{t.donna.columns.net}</TableHead>
                <TableHead />
              </TableRow>
            </TableHeader>
            <TableBody>
              {!loading && (data?.clients.length ?? 0) === 0 && (
                <TableRow>
                  <TableCell colSpan={9} className="py-10 text-center text-sm text-muted-foreground">
                    {t.donna.empty}
                  </TableCell>
                </TableRow>
              )}
              {data?.clients.map((row) => (
                <DonnaRow key={row.company.id} row={row} money={money} onSaved={refetch} onOpen={() => setOpenId(row.company.id)} onRemove={() => setRemoving(row)} />
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

      <DonnaSettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} onSaved={refetch} />

      <DonnaAddClientDialog open={addOpen} onOpenChange={setAddOpen} onAdded={refetch} />

      <ConfirmationDialog
        open={removing !== null}
        onOpenChange={(open) => !open && setRemoving(null)}
        title={removing ? t.donna.removeTitle(removing.company.name) : ""}
        description={t.donna.removeDescription}
        confirmLabel={t.donna.remove}
        variant="destructive"
        loading={remove.loading}
        onConfirm={() => remove.mutate(undefined)}
      />

      <DonnaClientDialog
        companyId={openId}
        month={month}
        open={openId !== null}
        onOpenChange={(open) => !open && setOpenId(null)}
        onChanged={refetch}
      />
    </div>
  );
}

function DonnaRow({
  row,
  money,
  onSaved,
  onOpen,
  onRemove,
}: {
  row: DonnaUsageClientRow;
  money: (amount: number, digits?: number) => string;
  onSaved: () => void;
  onOpen: () => void;
  onRemove: () => void;
}) {
  const t = useT();
  const repo = useRepositories().donnaRepository;
  const [price, setPrice] = useState(row.price_per_vehicle?.toString() ?? "");
  const changed = price !== (row.price_per_vehicle?.toString() ?? "");

  const save = useApiMutation(
    () => repo.updateClient(row.company.id, { donna_price_per_vehicle: price === "" ? null : Number(price) }),
    { successMessage: t.donna.saved, onSuccess: onSaved }
  );

  return (
    <TableRow>
      <TableCell className="font-medium">{row.company.name}</TableCell>
      <TableCell>
        <div className="flex items-center gap-2">
          <Input
            type="number"
            min={0}
            step="0.01"
            value={price}
            placeholder={t.donna.noPrice}
            onChange={(e) => setPrice(e.target.value)}
            className="h-8 w-24"
          />
          {changed && (
            <Button size="sm" variant="outline" disabled={save.loading} onClick={() => save.mutate(undefined)}>
              {t.donna.save}
            </Button>
          )}
        </div>
      </TableCell>
      <TableCell className="text-right tabular-nums">
        {row.gift ? (
          <span className={row.gift.revoked ? "text-muted-foreground line-through" : ""}>{money(row.gift.amount_eur)}</span>
        ) : (
          "—"
        )}
        {row.gift?.custom && !row.gift.revoked && <Badge variant="secondary" className="ml-2">{t.donna.custom}</Badge>}
        {row.gift?.revoked && <Badge variant="outline" className="ml-2">{t.donna.revoked}</Badge>}
      </TableCell>
      <TableCell className="text-right tabular-nums">{money(row.donna.price_eur)}</TableCell>
      <TableCell className={`text-right tabular-nums ${row.donna.overage_eur > 0 ? "font-semibold text-emerald-700" : "text-muted-foreground"}`}>
        {money(row.donna.overage_eur)}
      </TableCell>
      <TableCell className="text-right tabular-nums text-muted-foreground">
        {money(row.donna.cost_eur + row.platform.cost_eur, 2)}
      </TableCell>
      <TableCell className="text-right tabular-nums text-muted-foreground">{money(row.platform.price_eur)}</TableCell>
      <TableCell className={`text-right tabular-nums font-medium ${row.net_eur < 0 ? "text-red-600" : "text-emerald-700"}`}>
        {money(row.net_eur)}
      </TableCell>
      <TableCell className="text-right">
        <Button size="sm" variant="ghost" onClick={onOpen}>
          {t.donna.details}
        </Button>
        <Button size="sm" variant="ghost" className="text-red-600" onClick={onRemove}>
          {t.donna.remove}
        </Button>
      </TableCell>
    </TableRow>
  );
}