"use client";

import { useMemo, useState } from "react";
import { ChevronLeft, ChevronRight, Minus, Plus } from "lucide-react";
import { Badge, type BadgeTone } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Invoice = {
  project: string;
  client: string;
  amount: string;
  status: string;
  tone: BadgeTone;
  schedule?: number[];
};

const months = [
  "Janv.",
  "Févr.",
  "Mars",
  "Avril",
  "Mai",
  "Juin",
  "Juil.",
  "Août",
  "Sept.",
  "Oct.",
  "Nov.",
  "Déc."
];

export function BillingPlanningBoard({ invoices }: { invoices: Invoice[] }) {
  const [startMonth, setStartMonth] = useState(0);
  const [visibleCount, setVisibleCount] = useState(6);
  const visibleMonths = months.slice(startMonth, startMonth + visibleCount);
  const gridTemplate = `210px 190px 96px 90px repeat(${visibleMonths.length}, minmax(88px, 1fr))`;
  const total = useMemo(
    () =>
      invoices.reduce(
        (sum, invoice) =>
          sum + (invoice.schedule ?? []).slice(startMonth, startMonth + visibleCount).reduce((a, b) => a + b, 0),
        0
      ),
    [invoices, startMonth, visibleCount]
  );

  return (
    <div className="rounded-lg border border-border bg-white">
      <div className="flex flex-col gap-3 border-b border-border p-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h2 className="text-base font-semibold">Planning de facturation</h2>
          <p className="mt-1 text-sm text-muted-foreground">Montants prévus par mois, inspirés du tableur actuel.</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Badge tone="red">{formatCurrency(total)}</Badge>
          <Button type="button" variant="secondary" className="h-8 w-8 px-0" onClick={() => setVisibleCount((v) => Math.min(12, v + 2))}>
            <Minus className="h-4 w-4" />
          </Button>
          <Button type="button" variant="secondary" className="h-8 w-8 px-0" onClick={() => setVisibleCount((v) => Math.max(4, v - 2))}>
            <Plus className="h-4 w-4" />
          </Button>
          <Button type="button" variant="secondary" className="h-8 w-8 px-0" onClick={() => setStartMonth((v) => Math.max(0, v - 1))}>
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            type="button"
            variant="secondary"
            className="h-8 w-8 px-0"
            onClick={() => setStartMonth((v) => Math.min(months.length - visibleCount, v + 1))}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
      <div className="overflow-x-auto">
        <div className="min-w-[980px]">
          <div className="grid bg-primary text-xs font-bold uppercase text-white" style={{ gridTemplateColumns: gridTemplate }}>
            <div className="px-3 py-2">Projet</div>
            <div className="px-3 py-2">Client</div>
            <div className="px-3 py-2 text-right">Total</div>
            <div className="px-3 py-2">Statut</div>
            {visibleMonths.map((month) => (
              <div key={month} className="border-l border-white/15 px-3 py-2 text-center">
                {month}
              </div>
            ))}
          </div>
          {invoices.map((invoice) => (
            <div
              key={invoice.project}
              className="grid border-t border-border text-xs"
              style={{ gridTemplateColumns: gridTemplate }}
            >
              <div className="truncate bg-[#eef8e7] px-3 py-2 font-bold text-[#272445]">{invoice.project}</div>
              <div className="truncate px-3 py-2 font-semibold">{invoice.client}</div>
              <div className="px-3 py-2 text-right font-bold">{invoice.amount}</div>
              <div className="px-3 py-2">
                <Badge tone={invoice.tone}>{invoice.status}</Badge>
              </div>
              {visibleMonths.map((_, index) => {
                const value = invoice.schedule?.[startMonth + index] ?? 0;
                return (
                  <div
                    key={index}
                    className={cn(
                      "border-l border-border px-3 py-2 text-right",
                      value > 0 && "bg-[#dbe7ff] font-semibold",
                      value > 10000 && "bg-[#fff34d]",
                      value < 0 && "bg-accent text-white"
                    )}
                  >
                    {value > 0 ? formatCurrency(value) : ""}
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function formatCurrency(value: number) {
  return `${Math.round(value).toLocaleString("fr-FR")} EUR`;
}