"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useCallback, useState } from "react";
import AddLeaveDialog from "./add-leave-dialog";
import LeaveSettingsPolicyTable from "./leave-settings-policy-table";

const numField =
  "h-12 w-full min-w-0 rounded-lg border-0 bg-[#F4F5FA] px-3 text-[15px] font-medium tabular-nums text-[#1C1D22] focus-visible:ring-0 focus-visible:ring-offset-0 sm:max-w-[160px]";

type BoolChoice = "yes" | "no";

function RadioPair({
  name,
  value,
  onChange,
  label,
}: {
  name: string;
  value: BoolChoice;
  onChange: (v: BoolChoice) => void;
  label?: string;
}) {
  return (
    <div className="space-y-2">
      {label ? (
        <span className="text-[13px] font-medium text-[#545D69]">{label}</span>
      ) : null}
      <div className="flex flex-wrap items-center gap-5">
        <label className="flex cursor-pointer items-center gap-2 text-sm font-medium text-[#383E49]">
          <input
            type="radio"
            name={name}
            checked={value === "no"}
            onChange={() => onChange("no")}
            className="size-4 accent-[#074473]"
          />
          No
        </label>
        <label className="flex cursor-pointer items-center gap-2 text-sm font-medium text-[#383E49]">
          <input
            type="radio"
            name={name}
            checked={value === "yes"}
            onChange={() => onChange("yes")}
            className="size-4 accent-[#074473]"
          />
          Yes
        </label>
      </div>
    </div>
  );
}

type Props = {
  app: string;
};

const policyRows = [
  { id: "1", employeeName: "Janet Adebayo", days: "05" },
  { id: "2", employeeName: "Samuel Johnson", days: "08" },
];

export default function LeaveSettingsPage({ app }: Props) {
  const router = useRouter();
  const [addLeaveOpen, setAddLeaveOpen] = useState(false);

  const [annualOn, setAnnualOn] = useState(true);
  const [annualDays, setAnnualDays] = useState("12");
  const [carryForward, setCarryForward] = useState<BoolChoice>("yes");
  const [carryForwardDays, setCarryForwardDays] = useState("3");
  const [earnedLeave, setEarnedLeave] = useState<BoolChoice>("no");

  const [sickOn, setSickOn] = useState(true);
  const [sickDays, setSickDays] = useState("4");

  const [hospitalOn, setHospitalOn] = useState(false);
  const [hospitalDays, setHospitalDays] = useState("3");

  const [maternityOn, setMaternityOn] = useState(true);
  const [maternityDays, setMaternityDays] = useState("45");

  const [paternityOn, setPaternityOn] = useState(true);
  const [paternityDays, setPaternityDays] = useState("30");

  const [policySel, setPolicySel] = useState<Record<string, boolean>>({});

  const setRow = useCallback((prefix: string, id: string, checked: boolean) => {
    setPolicySel((prev) => ({ ...prev, [`${prefix}-${id}`]: checked }));
  }, []);

  const setAll = useCallback((prefix: string, checked: boolean) => {
    setPolicySel((prev) => {
      const next = { ...prev };
      policyRows.forEach((r) => {
        next[`${prefix}-${r.id}`] = checked;
      });
      return next;
    });
  }, []);

  const settingsHref = `/${app}/settings`;
  const holidaysHref = `/${app}/leaves`;

  const mutedBlock = (on: boolean) => cn(!on && "pointer-events-none opacity-45");

  return (
    <div className="min-h-0 space-y-6 bg-[#F4F5FA] p-5 md:p-6">
      <AddLeaveDialog open={addLeaveOpen} onOpenChange={setAddLeaveOpen} />

      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex min-w-0 items-center gap-3">
          <Button
            type="button"
            variant="outline"
            size="icon"
            className="size-10 shrink-0 rounded-lg border border-[#E0E0E0] bg-white text-[#383E49] hover:bg-[#F9FAFB]"
            onClick={() => router.back()}
            aria-label="Go back"
          >
            <ArrowLeft className="size-5" aria-hidden />
          </Button>
          <h1 className="min-w-0 text-xl font-bold text-[#1C1D22] sm:text-2xl">Leave Settings</h1>
        </div>
        <div className="flex flex-wrap items-center gap-3">
          <Button
            asChild
            variant="outline"
            className="h-[42px] shrink-0 rounded-md border-[#074473] bg-white px-5 text-sm font-semibold text-[#074473] hover:bg-[#eef4f8]"
          >
            <Link href={settingsHref}>Leave Setting</Link>
          </Button>
          <Button
            type="button"
            className="h-[42px] shrink-0 rounded-md bg-[#074473] px-6 text-sm font-semibold text-white hover:bg-[#074473]/90"
            onClick={() => setAddLeaveOpen(true)}
          >
            Add New Holiday
          </Button>
        </div>
      </div>

      <div className="space-y-5">
        <Card className="rounded-xl border border-gray-100 bg-white shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between gap-4 space-y-0 pb-4 pt-6">
            <h2 className="text-lg font-bold text-[#1C1D22]">Annual Leaves</h2>
            <Switch
              checked={annualOn}
              onCheckedChange={setAnnualOn}
              className="data-[state=checked]:bg-[#074473]"
            />
          </CardHeader>
          <CardContent className={cn("space-y-6 pt-0", mutedBlock(annualOn))}>
            <div className="flex flex-col gap-6 lg:flex-row lg:flex-wrap lg:items-end">
              <div className="space-y-2">
                <Label className="text-[13px] font-medium text-[#545D69]">Days</Label>
                <Input
                  type="number"
                  min={0}
                  value={annualDays}
                  onChange={(e) => setAnnualDays(e.target.value)}
                  className={numField}
                />
              </div>
              <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:gap-6">
                <RadioPair name="annual-carry" value={carryForward} onChange={setCarryForward} label="Carry Forward" />
                <div className="space-y-2">
                  <Label htmlFor="annual-carry-days" className="sr-only">
                    Carry forward days
                  </Label>
                  <Input
                    id="annual-carry-days"
                    type="number"
                    min={0}
                    placeholder="Carry Forward"
                    value={carryForwardDays}
                    onChange={(e) => setCarryForwardDays(e.target.value)}
                    className={`${numField} placeholder:text-[#8B8D97]`}
                    disabled={carryForward === "no"}
                  />
                </div>
              </div>
              <RadioPair name="annual-earned" value={earnedLeave} onChange={setEarnedLeave} label="Earned Leave" />
            </div>
            <div className="flex justify-end">
              <Button
                type="button"
                className="h-10 rounded-md bg-[#074473] px-5 text-sm font-semibold text-white hover:bg-[#074473]/90"
              >
                Add Custom Policy
              </Button>
            </div>
            <LeaveSettingsPolicyTable
              selectionKey="annual"
              selected={policySel}
              onToggleAll={(on) => setAll("annual", on)}
              onToggleRow={(id, on) => setRow("annual", id, on)}
            />
          </CardContent>
        </Card>

        <Card className="rounded-xl border border-gray-100 bg-white shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between gap-4 space-y-0 pb-4 pt-6">
            <h2 className="text-lg font-bold text-[#1C1D22]">Sick Leave</h2>
            <Switch
              checked={sickOn}
              onCheckedChange={setSickOn}
              className="data-[state=checked]:bg-[#074473]"
            />
          </CardHeader>
          <CardContent className={cn("pt-0", mutedBlock(sickOn))}>
            <div className="max-w-[200px] space-y-2">
              <Label className="text-[13px] font-medium text-[#545D69]">Days</Label>
              <Input
                type="number"
                min={0}
                value={sickDays}
                onChange={(e) => setSickDays(e.target.value)}
                className={numField}
              />
            </div>
          </CardContent>
        </Card>

        <Card className="rounded-xl border border-gray-100 bg-white shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between gap-4 space-y-0 pb-4 pt-6">
            <h2 className="text-lg font-bold text-[#1C1D22]">Hospitalisation</h2>
            <Switch
              checked={hospitalOn}
              onCheckedChange={setHospitalOn}
              className="data-[state=checked]:bg-[#074473]"
            />
          </CardHeader>
          <CardContent className={cn("space-y-6 pt-0", mutedBlock(hospitalOn))}>
            <div className="max-w-[200px] space-y-2">
              <Label className="text-[13px] font-medium text-[#545D69]">Days</Label>
              <Input
                type="number"
                min={0}
                value={hospitalDays}
                onChange={(e) => setHospitalDays(e.target.value)}
                className={numField}
              />
            </div>
            <div className="flex justify-end">
              <Button
                type="button"
                className="h-10 rounded-md bg-[#074473] px-5 text-sm font-semibold text-white hover:bg-[#074473]/90"
              >
                Add Custom Policy
              </Button>
            </div>
            <LeaveSettingsPolicyTable
              selectionKey="hospital"
              selected={policySel}
              onToggleAll={(on) => setAll("hospital", on)}
              onToggleRow={(id, on) => setRow("hospital", id, on)}
            />
          </CardContent>
        </Card>

        <Card className="rounded-xl border border-gray-100 bg-white shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between gap-4 space-y-0 pb-4 pt-6">
            <h2 className="text-lg font-bold leading-snug text-[#1C1D22]">
              Maternity Assigned to female only
            </h2>
            <Switch
              checked={maternityOn}
              onCheckedChange={setMaternityOn}
              className="data-[state=checked]:bg-[#074473]"
            />
          </CardHeader>
          <CardContent className={cn("pt-0", mutedBlock(maternityOn))}>
            <div className="max-w-[200px] space-y-2">
              <Label className="text-[13px] font-medium text-[#545D69]">Days</Label>
              <Input
                type="number"
                min={0}
                value={maternityDays}
                onChange={(e) => setMaternityDays(e.target.value)}
                className={numField}
              />
            </div>
          </CardContent>
        </Card>

        <Card className="rounded-xl border border-gray-100 bg-white shadow-sm">
          <CardHeader className="flex flex-row items-center justify-between gap-4 space-y-0 pb-4 pt-6">
            <h2 className="text-lg font-bold leading-snug text-[#1C1D22]">
              Paternity Assigned to male only
            </h2>
            <Switch
              checked={paternityOn}
              onCheckedChange={setPaternityOn}
              className="data-[state=checked]:bg-[#074473]"
            />
          </CardHeader>
          <CardContent className={cn("pt-0", mutedBlock(paternityOn))}>
            <div className="max-w-[200px] space-y-2">
              <Label className="text-[13px] font-medium text-[#545D69]">Days</Label>
              <Input
                type="number"
                min={0}
                value={paternityDays}
                onChange={(e) => setPaternityDays(e.target.value)}
                className={numField}
              />
            </div>
          </CardContent>
        </Card>
      </div>

      <p className="text-center text-xs text-[#8B8D97]">
        <Link href={holidaysHref} className="font-medium text-[#074473] hover:underline">
          Back to holidays list
        </Link>
      </p>
    </div>
  );
}