"use client";

import { useState } from "react";
import { trpc } from "@/trpc/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { toast } from "sonner";

export default function FiscalYearSection() {
  const utils = trpc.useUtils();

  const [isAddFiscalYearOpen, setIsAddFiscalYearOpen] = useState(false);
  const [editingFiscalYear, setEditingFiscalYear] = useState<{
    id: string;
    year: string;
    startDate: string;
    endDate: string;
  } | null>(null);
  const [newFiscalYear, setNewFiscalYear] = useState({
    year: "",
    startDate: "",
    endDate: "",
  });

  const fiscalYearsQuery = trpc.settings.getFiscalYears.useQuery();

  const createFiscalYearMutation = trpc.settings.createFiscalYear.useMutation({
    onSuccess: () => {
      toast.success("Fiscal year created");
      void utils.settings.getFiscalYears.invalidate();
      setIsAddFiscalYearOpen(false);
      setNewFiscalYear({ year: "", startDate: "", endDate: "" });
    },
    onError: (err) => toast.error(err.message),
  });
  const updateFiscalYearMutation = trpc.settings.updateFiscalYear.useMutation({
    onSuccess: () => {
      toast.success("Fiscal year updated");
      void utils.settings.getFiscalYears.invalidate();
      setEditingFiscalYear(null);
    },
    onError: (err) => toast.error(err.message),
  });
  const deleteFiscalYearMutation = trpc.settings.deleteFiscalYear.useMutation({
    onSuccess: () => {
      toast.success("Fiscal year deleted");
      void utils.settings.getFiscalYears.invalidate();
    },
    onError: (err) => toast.error(err.message),
  });
  const setActiveFyMutation = trpc.settings.setActiveFiscalYear.useMutation({
    onSuccess: () => {
      toast.success("Active fiscal year updated");
      void utils.settings.getFiscalYears.invalidate();
    },
    onError: (err) => toast.error(err.message),
  });

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold">Fiscal Years</h2>
        <Dialog
          open={isAddFiscalYearOpen}
          onOpenChange={setIsAddFiscalYearOpen}
        >
          <DialogTrigger render={<Button />}>Add Fiscal Year</DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Add Fiscal Year</DialogTitle>
            </DialogHeader>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                createFiscalYearMutation.mutate(newFiscalYear);
              }}
              className="space-y-4"
            >
              <div>
                <Label>Year</Label>
                <Input
                  placeholder="2025-26"
                  value={newFiscalYear.year}
                  onChange={(e) =>
                    setNewFiscalYear({
                      ...newFiscalYear,
                      year: e.target.value,
                    })
                  }
                  required
                />
              </div>
              <div>
                <Label>Start Date</Label>
                <Input
                  type="date"
                  value={newFiscalYear.startDate}
                  onChange={(e) =>
                    setNewFiscalYear({
                      ...newFiscalYear,
                      startDate: e.target.value,
                    })
                  }
                  required
                />
              </div>
              <div>
                <Label>End Date</Label>
                <Input
                  type="date"
                  value={newFiscalYear.endDate}
                  onChange={(e) =>
                    setNewFiscalYear({
                      ...newFiscalYear,
                      endDate: e.target.value,
                    })
                  }
                  required
                />
              </div>
              <Button
                type="submit"
                disabled={createFiscalYearMutation.isPending}
              >
                {createFiscalYearMutation.isPending
                  ? "Creating..."
                  : "Create"}
              </Button>
            </form>
          </DialogContent>
        </Dialog>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Year</TableHead>
            <TableHead>Start Date</TableHead>
            <TableHead>End Date</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {fiscalYearsQuery.data?.map((fy) => (
            <TableRow key={fy.id}>
              <TableCell>{fy.year}</TableCell>
              <TableCell>
                {new Date(fy.startDate).toLocaleDateString("en-CA")}
              </TableCell>
              <TableCell>
                {new Date(fy.endDate).toLocaleDateString("en-CA")}
              </TableCell>
              <TableCell>
                {fy.isActive ? (
                  <Badge>Active</Badge>
                ) : (
                  <Badge variant="secondary">Inactive</Badge>
                )}
              </TableCell>
              <TableCell>
                <div className="flex gap-2">
                  {!fy.isActive && (
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() =>
                        setActiveFyMutation.mutate({ fiscalYearId: fy.id })
                      }
                    >
                      Set Active
                    </Button>
                  )}
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() =>
                      setEditingFiscalYear({
                        id: fy.id,
                        year: fy.year,
                        startDate:
                          new Date(fy.startDate)
                            .toISOString()
                            .split("T")[0] || "",
                        endDate:
                          new Date(fy.endDate)
                            .toISOString()
                            .split("T")[0] || "",
                      })
                    }
                  >
                    Edit
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      if (confirm("Delete this fiscal year?")) {
                        deleteFiscalYearMutation.mutate({ id: fy.id });
                      }
                    }}
                  >
                    Delete
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>

      <Dialog
        open={!!editingFiscalYear}
        onOpenChange={(open) => {
          if (!open) setEditingFiscalYear(null);
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Edit Fiscal Year</DialogTitle>
          </DialogHeader>
          {editingFiscalYear && (
            <form
              onSubmit={(e) => {
                e.preventDefault();
                if (!editingFiscalYear) return;
                updateFiscalYearMutation.mutate(editingFiscalYear);
              }}
              className="space-y-4"
            >
              <div>
                <Label>Year</Label>
                <Input
                  value={editingFiscalYear.year}
                  onChange={(e) =>
                    setEditingFiscalYear({
                      ...editingFiscalYear,
                      year: e.target.value,
                    })
                  }
                  required
                />
              </div>
              <div>
                <Label>Start Date</Label>
                <Input
                  type="date"
                  value={editingFiscalYear.startDate}
                  onChange={(e) =>
                    setEditingFiscalYear({
                      ...editingFiscalYear,
                      startDate: e.target.value,
                    })
                  }
                  required
                />
              </div>
              <div>
                <Label>End Date</Label>
                <Input
                  type="date"
                  value={editingFiscalYear.endDate}
                  onChange={(e) =>
                    setEditingFiscalYear({
                      ...editingFiscalYear,
                      endDate: e.target.value,
                    })
                  }
                  required
                />
              </div>
              <Button
                type="submit"
                disabled={updateFiscalYearMutation.isPending}
              >
                {updateFiscalYearMutation.isPending ? "Saving..." : "Save"}
              </Button>
            </form>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}