// components/staff/contracts/PayslipForm.tsx
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

type AnyObj = Record<string, any>;

export default function PayslipForm({
  defaultValues,
  onSubmit,
}: {
  defaultValues: AnyObj;
  onSubmit: (payload: AnyObj) => Promise<void> | void;
}) {
  const [f, setF] = useState<AnyObj>({
    ...defaultValues,
  });

  const change = (k: string, v: any) => setF((x: AnyObj) => ({ ...x, [k]: v }));

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const payload = {
      ...f,
      period_start: (f.period_start || "")?.slice?.(0, 10) ?? f.period_start,
      period_end: (f.period_end || "")?.slice?.(0, 10) ?? f.period_end,
      period_month: (f.period_month || "")?.slice?.(0, 10) ?? f.period_month,
      pay_date: f.pay_date ? String(f.pay_date).slice(0, 10) : null,
      processed: Boolean(f.processed),
      transfer_done: Boolean(f.transfer_done),
    };
    await onSubmit(payload);
  };

  return (
    <form onSubmit={submit} className="space-y-3">
      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label className="text-xs">n° de paie</Label>
          <Input
            value={f.pay_number ?? ""}
            onChange={(e) => change("pay_number", e.target.value)}
          />
        </div>
        <div>
          <Label className="text-xs">Date de paie</Label>
          <Input
            type="date"
            value={String(f.pay_date ?? "").slice(0, 10)}
            onChange={(e) => change("pay_date", e.target.value)}
          />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label className="text-xs">Période début</Label>
          <Input
            type="date"
            value={String(f.period_start ?? "").slice(0, 10)}
            onChange={(e) => change("period_start", e.target.value)}
          />
        </div>
        <div>
          <Label className="text-xs">Période fin</Label>
          <Input
            type="date"
            value={String(f.period_end ?? "").slice(0, 10)}
            onChange={(e) => change("period_end", e.target.value)}
          />
        </div>
      </div>

      <div>
        <Label className="text-xs">Mois de paie (1er du mois)</Label>
        <Input
          type="date"
          value={String(f.period_month ?? "").slice(0, 10)}
          onChange={(e) => change("period_month", e.target.value)}
        />
      </div>

      <div className="grid grid-cols-3 gap-3">
        <div>
          <Label className="text-xs">Brut</Label>
          <Input
            value={f.gross_amount ?? ""}
            onChange={(e) => change("gross_amount", e.target.value)}
          />
        </div>
        <div>
          <Label className="text-xs">Net</Label>
          <Input
            value={f.net_amount ?? ""}
            onChange={(e) => change("net_amount", e.target.value)}
          />
        </div>
        <div>
          <Label className="text-xs">Coût employeur</Label>
          <Input
            value={f.employer_cost ?? ""}
            onChange={(e) => change("employer_cost", e.target.value)}
          />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label className="text-xs">AEM statut</Label>
          <Input
            value={f.aem_status ?? ""}
            onChange={(e) => change("aem_status", e.target.value)}
          />
        </div>
        <div>
          <Label className="text-xs">Tag analytique</Label>
          <Input
            value={f.analytic_tag ?? ""}
            onChange={(e) => change("analytic_tag", e.target.value)}
          />
        </div>
      </div>

      <div>
        <Label className="text-xs">Chemin de stockage (S3)</Label>
        <Input
          value={f.storage_path ?? ""}
          onChange={(e) => change("storage_path", e.target.value)}
        />
      </div>

      <div className="grid grid-cols-2 gap-3">
        <label className="text-xs flex items-center gap-2">
          <input
            type="checkbox"
            checked={Boolean(f.processed)}
            onChange={(e) => change("processed", e.target.checked)}
          />
          Traité
        </label>
        <label className="text-xs flex items-center gap-2">
          <input
            type="checkbox"
            checked={Boolean(f.transfer_done)}
            onChange={(e) => change("transfer_done", e.target.checked)}
          />
          Virement ok
        </label>
      </div>

      <div className="pt-2">
        <Button type="submit" className="w-full rounded-2xl">
          Créer le payslip
        </Button>
      </div>
    </form>
  );
}