"use client";

import { API_BASE_URL, getAuthHeaders } from "@/lib/api";
import React, { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { ArrowLeft, Building2, MapPin, Maximize2, Tag, DollarSign, Edit2, Trash2, Save, X, Loader2, FileText } from "lucide-react";

export default function AssetDetailPage() {
    const { id } = useParams();
    const router = useRouter();
    const [asset, setAsset] = useState<any>(null);
    const [assetTypes, setAssetTypes] = useState<any[]>([]);
    const [properties, setProperties] = useState<any[]>([]);
    const [contracts, setContracts] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);
    const [isEditing, setIsEditing] = useState(false);
    const [isSaving, setIsSaving] = useState(false);
    const [isDeleteOpen, setIsDeleteOpen] = useState(false);
    const [isDeleting, setIsDeleting] = useState(false);
    const [editForm, setEditForm] = useState<any>({});

    useEffect(() => {
        async function fetchData() {
            try {
                const [assetRes, typesRes, propsRes, contractsRes] = await Promise.all([
                    fetch(`${API_BASE_URL}/assets/${id}/`, { headers: getAuthHeaders() }),
                    fetch(`${API_BASE_URL}/asset-types/`, { headers: getAuthHeaders() }),
                    fetch(`${API_BASE_URL}/properties/`, { headers: getAuthHeaders() }),
                    fetch(`${API_BASE_URL}/contracts/`, { headers: getAuthHeaders() }),
                ]);
                const assetData = await assetRes.json();
                setAsset(assetData);
                setEditForm({
                    name: assetData.name || "",
                    location: assetData.location || "",
                    precise_size: assetData.precise_size || "",
                    price: assetData.price || "",
                    status: assetData.status || "available",
                    asset_type: assetData.asset_type || "",
                    property: assetData.property || "",
                });
                const typesData = await typesRes.json();
                setAssetTypes(typesData.results || typesData);
                const propsData = await propsRes.json();
                setProperties(propsData.results || propsData);
                const contractsData = await contractsRes.json();
                const all = contractsData.results || contractsData;
                setContracts(all.filter((c: any) => c.asset === Number(id) || c.asset?.id === Number(id)));
            } catch (err) {
                console.error(err);
            } finally {
                setLoading(false);
            }
        }
        fetchData();
    }, [id]);

    const handleSave = async () => {
        setIsSaving(true);
        try {
            const res = await fetch(`${API_BASE_URL}/assets/${id}/`, {
                method: "PATCH",
                headers: { "Content-Type": "application/json", ...getAuthHeaders() },
                body: JSON.stringify(editForm),
            });
            if (res.ok) {
                const updated = await res.json();
                setAsset(updated);
                setIsEditing(false);
            } else {
                alert("Failed to save: " + JSON.stringify(await res.json()));
            }
        } catch (e) {
            alert("Network error");
        } finally {
            setIsSaving(false);
        }
    };

    const handleDelete = async () => {
        setIsDeleting(true);
        try {
            const res = await fetch(`${API_BASE_URL}/assets/${id}/`, {
                method: "DELETE",
                headers: getAuthHeaders(),
            });
            if (res.ok || res.status === 204) {
                router.push("/assets");
            } else {
                alert("Delete failed: " + (await res.text()));
                setIsDeleteOpen(false);
            }
        } catch (e) {
            alert("Network error");
        } finally {
            setIsDeleting(false);
        }
    };

    const statusColor: Record<string, string> = {
        available: "bg-emerald-500/10 text-emerald-600 border-none",
        reserved: "bg-amber-500/10 text-amber-600 border-none",
        under_contract: "bg-sky-500/10 text-sky-600 border-none",
        completed: "bg-muted/30 text-muted-foreground border-none",
    };

    if (loading) return (
        <div className="flex-1 h-[60vh] flex items-center justify-center">
            <Loader2 className="h-8 w-8 animate-spin text-primary/40" />
        </div>
    );

    if (!asset) return (
        <div className="flex-1 flex flex-col items-center justify-center gap-4 text-muted-foreground">
            <Building2 className="h-16 w-16 opacity-20" />
            <p className="font-bold uppercase tracking-widest text-sm">Asset not found</p>
            <Link href="/assets"><Button variant="outline">← Back to Assets</Button></Link>
        </div>
    );

    return (
        <div className="flex-1 space-y-6 pb-12">
            {/* Header */}
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div className="flex items-center gap-4">
                    <Link href="/assets">
                        <Button variant="ghost" size="icon" className="rounded-xl border border-border/20 hover:bg-muted/30">
                            <ArrowLeft className="h-4 w-4" />
                        </Button>
                    </Link>
                    <div>
                        <h2 className="text-2xl font-black tracking-tight text-foreground">{asset.name}</h2>
                        <p className="text-muted-foreground text-sm font-medium mt-0.5">
                            Asset ID: <span className="font-mono font-bold text-foreground">#{String(asset.id).padStart(5, '0')}</span>
                        </p>
                    </div>
                </div>

                <div className="flex items-center gap-2">
                    {isEditing ? (
                        <>
                            <Button variant="outline" className="rounded-xl border-border/20" onClick={() => setIsEditing(false)}>
                                <X className="h-4 w-4 mr-2" /> Cancel
                            </Button>
                            <Button onClick={handleSave} disabled={isSaving} className="rounded-xl bg-primary text-primary-foreground px-6">
                                {isSaving ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Save className="h-4 w-4 mr-2" />}
                                Save Changes
                            </Button>
                        </>
                    ) : (
                        <>
                            <Button variant="outline" className="rounded-xl border-border/20 hover:bg-muted/30" onClick={() => setIsEditing(true)}>
                                <Edit2 className="h-4 w-4 mr-2" /> Edit Asset
                            </Button>
                            <Button variant="destructive" className="rounded-xl" onClick={() => setIsDeleteOpen(true)}>
                                <Trash2 className="h-4 w-4 mr-2" /> Delete
                            </Button>
                        </>
                    )}
                </div>
            </div>

            <div className="grid gap-6 md:grid-cols-3">
                {/* Details Card */}
                <div className="md:col-span-2 space-y-6">
                    <Card className="rounded-2xl border-none shadow-card bg-card">
                        <CardHeader className="border-b border-border/10 pb-4">
                            <CardTitle className="text-base font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
                                <Building2 className="h-4 w-4" /> Asset Details
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="pt-6 space-y-5">
                            {isEditing ? (
                                <div className="space-y-4">
                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                        <div className="space-y-2">
                                            <Label className="text-xs font-black uppercase tracking-widest text-muted-foreground">Name / Plot Number</Label>
                                            <Input value={editForm.name} onChange={e => setEditForm({ ...editForm, name: e.target.value })} className="rounded-xl" />
                                        </div>
                                        <div className="space-y-2">
                                            <Label className="text-xs font-black uppercase tracking-widest text-muted-foreground">Location</Label>
                                            <Input value={editForm.location} onChange={e => setEditForm({ ...editForm, location: e.target.value })} className="rounded-xl" />
                                        </div>
                                        <div className="space-y-2">
                                            <Label className="text-xs font-black uppercase tracking-widest text-muted-foreground">Size (sqm)</Label>
                                            <Input type="number" value={editForm.precise_size} onChange={e => setEditForm({ ...editForm, precise_size: e.target.value })} className="rounded-xl" />
                                        </div>
                                        <div className="space-y-2">
                                            <Label className="text-xs font-black uppercase tracking-widest text-muted-foreground">Price (₦)</Label>
                                            <Input type="number" value={editForm.price} onChange={e => setEditForm({ ...editForm, price: e.target.value })} className="rounded-xl" />
                                        </div>
                                        <div className="space-y-2">
                                            <Label className="text-xs font-black uppercase tracking-widest text-muted-foreground">Status</Label>
                                            <Select value={editForm.status} onValueChange={v => setEditForm({ ...editForm, status: v })}>
                                                <SelectTrigger className="rounded-xl"><SelectValue /></SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="available">Available</SelectItem>
                                                    <SelectItem value="reserved">Reserved</SelectItem>
                                                    <SelectItem value="under_contract">Under Contract</SelectItem>
                                                    <SelectItem value="completed">Sold / Completed</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <div className="space-y-2">
                                            <Label className="text-xs font-black uppercase tracking-widest text-muted-foreground">Asset Type</Label>
                                            <Select value={String(editForm.asset_type)} onValueChange={v => setEditForm({ ...editForm, asset_type: v })}>
                                                <SelectTrigger className="rounded-xl"><SelectValue placeholder="Select type..." /></SelectTrigger>
                                                <SelectContent>
                                                    {assetTypes.map(t => <SelectItem key={t.id} value={String(t.id)}>{t.name}</SelectItem>)}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <div className="space-y-2 sm:col-span-2">
                                            <Label className="text-xs font-black uppercase tracking-widest text-muted-foreground">Parent Estate</Label>
                                            <Select value={String(editForm.property)} onValueChange={v => setEditForm({ ...editForm, property: v })}>
                                                <SelectTrigger className="rounded-xl"><SelectValue placeholder="Select estate..." /></SelectTrigger>
                                                <SelectContent>
                                                    {properties.map(p => <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>)}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                    </div>
                                </div>
                            ) : (
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                    {[
                                        { icon: MapPin, label: "Location", value: asset.location || "—" },
                                        { icon: Maximize2, label: "Size", value: asset.precise_size ? `${asset.precise_size} sqm` : "—" },
                                        { icon: Tag, label: "Type", value: asset.asset_type_name || "—" },
                                        { icon: DollarSign, label: "Price", value: asset.formatted_price || "—" },
                                        { icon: Building2, label: "Estate", value: asset.property_name || "—" },
                                    ].map(({ icon: Icon, label, value }) => (
                                        <div key={label} className="flex items-start gap-3 p-4 rounded-xl bg-muted/10 border border-border/10">
                                            <div className="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
                                                <Icon className="h-4 w-4 text-primary" />
                                            </div>
                                            <div>
                                                <p className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">{label}</p>
                                                <p className="font-bold text-foreground mt-0.5">{value}</p>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    {/* Linked Contracts */}
                    <Card className="rounded-2xl border-none shadow-card bg-card">
                        <CardHeader className="border-b border-border/10 pb-4">
                            <CardTitle className="text-base font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
                                <FileText className="h-4 w-4" /> Linked Contracts ({contracts.length})
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="p-0">
                            {contracts.length === 0 ? (
                                <div className="h-32 flex items-center justify-center text-muted-foreground text-sm">
                                    No contracts linked to this asset.
                                </div>
                            ) : (
                                <div className="divide-y divide-border/10">
                                    {contracts.map((c: any) => (
                                        <div key={c.id} className="flex items-center justify-between px-6 py-4 hover:bg-muted/5 transition-colors">
                                            <div>
                                                <p className="font-bold text-foreground">{c.contract_number}</p>
                                                <p className="text-xs text-muted-foreground mt-0.5">
                                                    {typeof c.client === 'object' ? c.client.full_name : `Client #${c.client}`}
                                                </p>
                                            </div>
                                            <div className="flex items-center gap-3">
                                                <Badge className={`text-[10px] font-black uppercase tracking-widest px-3 ${statusColor[c.status] || ''}`}>
                                                    {c.status}
                                                </Badge>
                                                <Link href={`/contracts/${c.id}`}>
                                                    <Button variant="outline" size="sm" className="rounded-xl border-primary/20 text-primary hover:bg-primary hover:text-white transition-all font-bold text-[10px]">
                                                        View
                                                    </Button>
                                                </Link>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </CardContent>
                    </Card>
                </div>

                {/* Status Card */}
                <div className="space-y-4">
                    <Card className="rounded-2xl border-none shadow-card bg-card">
                        <CardHeader className="border-b border-border/10 pb-4">
                            <CardTitle className="text-base font-black uppercase tracking-widest text-muted-foreground">Status</CardTitle>
                        </CardHeader>
                        <CardContent className="pt-5 space-y-4">
                            <Badge className={`text-[10px] font-black uppercase tracking-widest px-4 py-2 text-sm ${statusColor[asset.status] || 'bg-muted text-muted-foreground'}`}>
                                {asset.status?.replace("_", " ")}
                            </Badge>
                            <div className="text-xs text-muted-foreground space-y-2 mt-4 border-t border-border/10 pt-4">
                                <div className="flex justify-between">
                                    <span>Available</span>
                                    <span className={`font-bold ${asset.is_available ? 'text-emerald-500' : 'text-rose-500'}`}>
                                        {asset.is_available ? "Yes" : "No"}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span>Locked</span>
                                    <span className={`font-bold ${asset.is_locked ? 'text-rose-500' : 'text-emerald-500'}`}>
                                        {asset.is_locked ? "Yes" : "No"}
                                    </span>
                                </div>
                                <div className="flex justify-between">
                                    <span>Contracts</span>
                                    <span className="font-bold text-foreground">{contracts.length}</span>
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    {asset.is_available && (
                        <Card className="rounded-2xl border-none shadow-card bg-primary/5 border border-primary/10">
                            <CardContent className="pt-5">
                                <p className="text-xs text-primary font-black uppercase tracking-widest mb-3">Quick Actions</p>
                                <Link href={`/contracts?asset=${asset.id}`}>
                                    <Button className="w-full rounded-xl bg-primary text-primary-foreground font-black text-[10px] uppercase tracking-widest">
                                        + New Contract for This Plot
                                    </Button>
                                </Link>
                            </CardContent>
                        </Card>
                    )}
                </div>
            </div>

            {/* Delete Confirmation Dialog */}
            <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
                <DialogContent className="sm:max-w-[400px] rounded-2xl">
                    <DialogHeader>
                        <DialogTitle className="text-rose-600 flex items-center gap-2">
                            <Trash2 className="h-5 w-5" /> Delete Asset
                        </DialogTitle>
                        <DialogDescription>
                            Are you sure you want to permanently delete <strong>{asset.name}</strong>?
                            This action cannot be undone and may affect linked contracts.
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter className="gap-2 pt-2">
                        <Button variant="outline" className="rounded-xl" onClick={() => setIsDeleteOpen(false)}>
                            Cancel
                        </Button>
                        <Button variant="destructive" className="rounded-xl" onClick={handleDelete} disabled={isDeleting}>
                            {isDeleting ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : <Trash2 className="h-4 w-4 mr-2" />}
                            Yes, Delete Asset
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
}