"use client";

import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { trpc } from "@/trpc/client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
import { Trash2 } from "lucide-react";
import { Label } from "@/components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export default function ItemDetailPage() {
  const params = useParams();
  const router = useRouter();
  const itemId = params.itemId as string;

  const [isEditOpen, setIsEditOpen] = useState(false);
  const [isRateOpen, setIsRateOpen] = useState(false);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  const [formData, setFormData] = useState({ 
    code: "", 
    name: "", 
    description: "", 
    unit: "", 
    categoryId: "", 
    status: "",
    defaultWeight: "",
  });
  const [rateData, setRateData] = useState({ fiscalYearId: "", rate: "", source: "manual" });

  const { data: item, refetch } = trpc.item.getById.useQuery({ id: itemId });
  const { data: categories } = trpc.category.getAll.useQuery();
  const { data: rateHistory } = trpc.item.getRateHistory.useQuery({ itemId });

  const updateMutation = trpc.item.update.useMutation({
    onSuccess: () => { setIsEditOpen(false); refetch(); toast.success("Item updated"); },
    onError: (e) => toast.error(e.message),
  });

  const deleteMutation = trpc.item.delete.useMutation({
    onSuccess: () => { toast.success("Item deleted"); router.push("/items"); },
    onError: (e) => toast.error(e.message),
  });

  const addRateMutation = trpc.item.addRate.useMutation({
    onSuccess: () => { setIsRateOpen(false); refetch(); toast.success("Rate added"); },
    onError: (e) => toast.error(e.message),
  });

  const handleUpdate = (e: React.FormEvent) => {
    e.preventDefault();
    updateMutation.mutate({
      id: itemId,
      code: formData.code || undefined,
      name: formData.name || undefined,
      description: formData.description || undefined,
      unit: formData.unit || undefined,
      categoryId: formData.categoryId || undefined,
      status: formData.status as "ACTIVE" | "DISCONTINUED" | "UNDER_REVIEW" | undefined,
      defaultWeight: formData.defaultWeight ? parseFloat(formData.defaultWeight) : undefined,
    });
  };

  const handleDelete = () => {
    deleteMutation.mutate({ id: itemId });
  };

  const handleAddRate = (e: React.FormEvent) => {
    e.preventDefault();
    addRateMutation.mutate({
      itemId,
      fiscalYearId: rateData.fiscalYearId,
      rate: parseFloat(rateData.rate),
      source: rateData.source,
    });
  };

  if (!item) return <div>Loading...</div>;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Button variant="ghost" onClick={() => router.push("/items")}>← Back to Items</Button>
          <h1 className="text-3xl font-bold mt-2">{item.code} - {item.name}</h1>
        </div>
        <div className="flex gap-2">
          <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
            <Button variant="outline" onClick={() => { 
                setFormData({ 
                  code: item.code || "", 
                  name: item.name, 
                  description: item.description || "", 
                  unit: item.unit, 
                  categoryId: item.categoryId || "", 
                  status: item.status,
                  defaultWeight: item.defaultWeight?.toString() || "",
                }); 
                setIsEditOpen(true); 
              }}>
              Edit
            </Button>
            <DialogContent className="max-h-[90vh] overflow-y-auto">
              <DialogHeader><DialogTitle>Edit Item</DialogTitle></DialogHeader>
              <form onSubmit={handleUpdate} className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Code</Label>
                    <Input value={formData.code} onChange={(e) => setFormData({ ...formData, code: e.target.value })} />
                  </div>
                  <div className="space-y-2">
                    <Label>Unit</Label>
                    <Input value={formData.unit} onChange={(e) => setFormData({ ...formData, unit: e.target.value })} />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Default Weight</Label>
                  <Input
                    type="number"
                    step="0.0001"
                    placeholder="1.0000"
                    value={formData.defaultWeight}
                    onChange={(e) => setFormData({ ...formData, defaultWeight: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Name</Label>
                  <Input value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} />
                </div>
                <div className="space-y-2">
                  <Label>Description</Label>
                  <Input value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })} />
                </div>
                <div className="space-y-2">
                  <Label>Category</Label>
                  <select
                    className="border-input bg-background flex h-10 w-full rounded-md border px-3 py-2"
                    value={formData.categoryId}
                    onChange={(e) => setFormData({ ...formData, categoryId: e.target.value })}
                  >
                    <option value="" disabled>Select category</option>
                    {categories?.map((c) => (
                      <option key={c.id} value={c.id}>{c.name}</option>
                    ))}
                  </select>
                </div>
                <div className="space-y-2">
                  <Label>Status</Label>
                  <select
                    className="border-input bg-background flex h-10 w-full rounded-md border px-3 py-2"
                    value={formData.status}
                    onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                  >
                    <option value="ACTIVE">Active</option>
                    <option value="DISCONTINUED">Discontinued</option>
                    <option value="UNDER_REVIEW">Under Review</option>
                  </select>
                </div>
                <div className="pt-2">
                  <Button type="submit" className="w-full bg-primary text-primary-foreground hover:bg-primary/90" disabled={updateMutation.isPending}>Save Changes</Button>
                </div>
              </form>
            </DialogContent>
          </Dialog>

          <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
            <Button variant="destructive" onClick={() => setIsDeleteOpen(true)}>
              <Trash2 className="h-4 w-4 mr-2" />
              Delete
            </Button>
            <DialogContent>
              <DialogHeader><DialogTitle>Are you absolutely sure?</DialogTitle></DialogHeader>
              <div className="py-4 text-sm text-muted-foreground">
                This action cannot be undone. This will permanently delete the item{" "}
                <strong className="text-foreground">{item.name}</strong> and all of its associated rate history.
              </div>
              <div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setIsDeleteOpen(false)}>Cancel</Button>
                <Button variant="destructive" onClick={handleDelete} disabled={deleteMutation.isPending}>
                  {deleteMutation.isPending ? "Deleting..." : "Yes, delete item"}
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        </div>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <Card>
          <CardHeader><CardTitle>Details</CardTitle></CardHeader>
          <CardContent>
          <dl className="space-y-2">
            <div className="flex justify-between"><dt>Code:</dt><dd>{item.code}</dd></div>
            <div className="flex justify-between"><dt>Name:</dt><dd>{item.name}</dd></div>
            <div className="flex justify-between"><dt>Description:</dt><dd>{item.description || "-"}</dd></div>
            <div className="flex justify-between"><dt>Unit:</dt><dd>{item.unit}</dd></div>
            <div className="flex justify-between"><dt>Category:</dt><dd>{item.category?.name}</dd></div>
            <div className="flex justify-between"><dt>Status:</dt><dd><Badge>{item.status}</Badge></dd></div>
          </dl>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle>Current Rate</CardTitle>
            <Dialog open={isRateOpen} onOpenChange={setIsRateOpen}>
              <Button variant="outline" size="sm" onClick={() => setIsRateOpen(true)}>Add Rate</Button>
              <DialogContent>
                <DialogHeader><DialogTitle>Add New Rate</DialogTitle></DialogHeader>
                <form onSubmit={handleAddRate} className="space-y-4">
                  <div>
                    <Label>Fiscal Year ID</Label>
                    <Input placeholder="Enter fiscal year ID" value={rateData.fiscalYearId} onChange={(e) => setRateData({ ...rateData, fiscalYearId: e.target.value })} />
                  </div>
                  <div>
                    <Label>Rate</Label>
                    <Input type="number" step="0.01" value={rateData.rate} onChange={(e) => setRateData({ ...rateData, rate: e.target.value })} />
                  </div>
                  <div>
                    <Label>Source</Label>
                    <Input value={rateData.source} onChange={(e) => setRateData({ ...rateData, source: e.target.value })} />
                  </div>
                  <Button type="submit" className="bg-primary text-primary-foreground hover:bg-primary/90" disabled={addRateMutation.isPending}>Add Rate</Button>
                </form>
              </DialogContent>
            </Dialog>
          </CardHeader>
          <CardContent>
          {item.itemRates?.[0] ? (
            <dl className="space-y-2">
              <div className="flex justify-between"><dt>Rate:</dt><dd className="font-semibold">NPR {Number(item.itemRates[0].rate).toLocaleString()}</dd></div>
              <div className="flex justify-between"><dt>Source:</dt><dd>{item.itemRates[0].source || "-"}</dd></div>
            </dl>
          ) : (
            <p className="text-muted-foreground">No rate set</p>
          )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader><CardTitle>Rate History</CardTitle></CardHeader>
          <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Fiscal Year</TableHead>
              <TableHead>Rate</TableHead>
              <TableHead>Source</TableHead>
              <TableHead>Source Ref</TableHead>
              <TableHead>Date</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rateHistory?.map((rate) => (
              <TableRow key={rate.id}>
                <TableCell>{rate.fiscalYear?.year}</TableCell>
                <TableCell>NPR {Number(rate.rate).toLocaleString()}</TableCell>
                <TableCell>{rate.source}</TableCell>
                <TableCell>{rate.sourceRef || "-"}</TableCell>
                <TableCell>{new Date(rate.createdAt).toLocaleDateString()}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        </CardContent>
        </Card>
      </div>
    </div>
  );
}