import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, useForm, router, Link } from '@inertiajs/react';
import InputLabel from '@/Components/InputLabel';
import TextInput from '@/Components/TextInput';
import InputError from '@/Components/InputError';
import { Pencil } from 'lucide-react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { useState } from 'react';
import Modal from '@/Components/Modal';
import { 
    Briefcase, 
    FileText, 
    DollarSign, 
    History, 
    Plus, 
    MapPin, 
    Calendar,
    AlertCircle,
    Download,
    Trash2,
    BarChart3
} from 'lucide-react';
import { 
    BarChart, 
    Bar, 
    XAxis, 
    YAxis, 
    CartesianGrid, 
    Tooltip as RechartsTooltip, 
    ResponsiveContainer 
} from 'recharts';

export default function Show({ affaire, availableProjects, tags, chartData }) {
    const [activeTab, setActiveTab] = useState('overview');
    const [expenseModal, setExpenseModal] = useState(false);
    const [editExpense, setEditExpense] = useState(null);

    const expenseForm = useForm({
        amount: '',
        expense_date: '',
        approval_status: 'pending',
    });

    const openAddExpense = () => {
        setEditExpense(null);
        expenseForm.reset();
        setExpenseModal(true);
    };

    const openEditExpense = (expense) => {
        setEditExpense(expense);
        expenseForm.setData({
            amount: expense.amount,
            expense_date: expense.expense_date,
            approval_status: expense.approval_status,
        });
        setExpenseModal(true);
    };

    const submitExpense = (e) => {
        e.preventDefault();
        if (editExpense) {
            expenseForm.put(route('affaires.expenses.update', [affaire.id, editExpense.id]), {
                onSuccess: () => setExpenseModal(false),
            });
        } else {
            expenseForm.post(route('affaires.expenses.store', affaire.id), {
                onSuccess: () => setExpenseModal(false),
            });
        }
    };

    const deleteExpense = (id) => {
        if (confirm('Are you sure you want to delete this expense?')) {
            router.delete(route('affaires.expenses.destroy', [affaire.id, id]));
        }
    };

    const tabs = [
        { id: 'overview', label: 'Overview', icon: Briefcase },
        { id: 'projects', label: 'Related Projects', icon: FileText },
        { id: 'attachments', label: 'Attachments', icon: FileText },
        { id: 'expenses', label: 'Expenses', icon: DollarSign },
        { id: 'activity', label: 'Activity', icon: History },
    ];

    const priorityColors = {
        high: 'text-red-600 bg-red-50 border-red-200',
        medium: 'text-orange-600 bg-orange-50 border-orange-200',
        low: 'text-green-600 bg-green-50 border-green-200',
    };

    return (
        <AuthenticatedLayout
            header={
                <div className="flex flex-col gap-2">
                    <div className="flex items-center gap-2 text-xs font-bold text-slate-500 uppercase tracking-widest">
                        <span>Affaires</span>
                        <span>/</span>
                        <span>{affaire.reference_number}</span>
                    </div>
                    <div className="flex flex-wrap items-center justify-between gap-4">
                        <div className="flex items-center gap-4">
                            <h2 className="text-2xl font-black text-slate-900 dark:text-white">
                                {affaire.title}
                            </h2>
                            <Badge className="bg-blue-600">Strategic</Badge>
                        </div>
                        <div className="flex items-center gap-2">
                             <Badge variant="outline" className="bg-blue-50 text-blue-600 border-blue-200">
                                {affaire.status.replace('_', ' ')}
                             </Badge>
                             <Badge variant="outline" className={priorityColors[affaire.priority || 'medium']}>
                                {affaire.priority || 'Medium'} Priority
                             </Badge>
                             <Button variant="outline" size="sm">Edit Affaire</Button>
                        </div>
                    </div>
                </div>
            }
        >
            <Head title={`Affaire - ${affaire.title}`} />

            <div className="space-y-6">
                {/* Tab Switcher */}
                <div className="flex border-b border-slate-200 dark:border-slate-800">
                    {tabs.map((tab) => (
                        <button
                            key={tab.id}
                            onClick={() => setActiveTab(tab.id)}
                            className={`flex items-center gap-2 px-6 py-4 text-sm font-bold transition-all border-b-2 -mb-[2px] ${
                                activeTab === tab.id
                                    ? 'border-blue-600 text-blue-600'
                                    : 'border-transparent text-slate-500 hover:text-slate-700'
                            }`}
                        >
                            <tab.icon className="size-4" />
                            {tab.label}
                        </button>
                    ))}
                </div>

                {/* Tab Content */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div className="lg:col-span-2 space-y-6">
                        {activeTab === 'overview' && (
                            <div className="space-y-6">
                                <Card className="border-none shadow-sm">
                                    <CardHeader>
                                        <CardTitle className="text-lg font-bold">Affaire Information</CardTitle>
                                    </CardHeader>
                                    <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                        <div className="space-y-4">
                                            <div>
                                                <p className="text-xs font-black uppercase text-slate-400 tracking-wider">Description</p>
                                                <p className="text-sm text-slate-700 dark:text-slate-300 mt-1">
                                                    Digital transformation of core business processes and systems for {affaire.businessContact?.name}.
                                                </p>
                                            </div>
                                            <div className="grid grid-cols-2 gap-4">
                                                <div>
                                                    <p className="text-xs font-black uppercase text-slate-400 tracking-wider">Type</p>
                                                    <p className="text-sm font-bold mt-1">Transformation</p>
                                                </div>
                                                <div>
                                                    <p className="text-xs font-black uppercase text-slate-400 tracking-wider">Priority</p>
                                                    <p className="text-sm font-bold text-red-600 mt-1 capitalize">{affaire.priority || 'High'}</p>
                                                </div>
                                            </div>
                                            <div>
                                                <p className="text-xs font-black uppercase text-slate-400 tracking-wider">Location</p>
                                                <div className="flex items-center gap-2 mt-1 text-sm font-bold">
                                                    <MapPin className="size-4 text-slate-400" />
                                                    {affaire.location_name || 'New York, USA'}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="space-y-4">
                                            <div className="grid grid-cols-2 gap-4">
                                                <div>
                                                    <p className="text-xs font-black uppercase text-slate-400 tracking-wider">Budget</p>
                                                    <p className="text-sm font-bold mt-1">$250,000.00</p>
                                                </div>
                                                <div>
                                                    <p className="text-xs font-black uppercase text-slate-400 tracking-wider">Currency</p>
                                                    <p className="text-sm font-bold mt-1 uppercase">USD</p>
                                                </div>
                                            </div>
                                            <div>
                                                <p className="text-xs font-black uppercase text-slate-400 tracking-wider">Expected Close</p>
                                                <div className="flex items-center gap-2 mt-1 text-sm font-bold">
                                                    <Calendar className="size-4 text-slate-400" />
                                                    {affaire.expected_close_date || 'Jul 31, 2024'}
                                                </div>
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>

                                <Card className="border-none shadow-sm">
                                    <CardHeader className="flex flex-row items-center justify-between">
                                        <CardTitle className="text-lg font-bold">Related Projects</CardTitle>
                                        <Button variant="outline" size="sm">View all</Button>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        {affaire.projects?.map((project) => (
                                            <div key={project.id} className="flex items-center justify-between p-3 rounded-xl border border-slate-100 dark:border-slate-800 hover:border-blue-500 transition-all group">
                                                <div className="flex items-center gap-4">
                                                    <div className="size-10 rounded-lg bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
                                                        <FileText className="size-5 text-slate-400 group-hover:text-blue-500" />
                                                    </div>
                                                    <div>
                                                        <p className="text-sm font-bold">{project.name}</p>
                                                        <div className="flex items-center gap-2">
                                                            {project.tags?.map(tag => (
                                                                <Badge key={tag.id} variant="outline" className="text-[10px] px-1 py-0" style={{ borderColor: tag.color, color: tag.color }}>
                                                                    {tag.name}
                                                                </Badge>
                                                            ))}
                                                        </div>
                                                    </div>
                                                </div>
                                                <Badge className={project.state === 'active' ? 'bg-green-500' : 'bg-blue-500'}>
                                                    {project.state.charAt(0).toUpperCase() + project.state.slice(1)}
                                                </Badge>
                                            </div>
                                        ))}
                                    </CardContent>
                                </Card>
                            </div>
                        )}

                        {activeTab === 'expenses' && (
                            <div className="space-y-6">
                                <Card className="border-none shadow-sm">
                                    <CardHeader className="flex flex-row items-center justify-between">
                                        <CardTitle className="text-lg font-bold">Monthly Spending</CardTitle>
                                        <BarChart3 className="size-5 text-slate-400" />
                                    </CardHeader>
                                    <CardContent>
                                        <div className="h-[250px] w-full">
                                            <ResponsiveContainer width="100%" height="100%">
                                                <BarChart data={chartData}>
                                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
                                                    <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 10, fontWeight: 'bold', fill: '#94a3b8' }} />
                                                    <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 10, fontWeight: 'bold', fill: '#94a3b8' }} />
                                                    <RechartsTooltip cursor={{ fill: '#f8fafc' }} />
                                                    <Bar dataKey="total" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                                                </BarChart>
                                            </ResponsiveContainer>
                                        </div>
                                    </CardContent>
                                </Card>
                                <Card className="border-none shadow-sm">
                                    <CardHeader className="flex flex-row items-center justify-between">
                                        <CardTitle className="text-lg font-bold">Expense List</CardTitle>
                                        <Button size="sm" onClick={openAddExpense}>Add Expense</Button>
                                    </CardHeader>
                                    <CardContent>
                                        <Table>
                                            <TableHeader>
                                                <TableRow>
                                                    <TableHead>Date</TableHead>
                                                    <TableHead>Amount</TableHead>
                                                    <TableHead>Status</TableHead>
                                                    <TableHead className="text-right">Actions</TableHead>
                                                </TableRow>
                                            </TableHeader>
                                            <TableBody>
                                                {affaire.expenses?.map((expense) => (
                                                    <TableRow key={expense.id}>
                                                        <TableCell className="font-bold">{new Date(expense.expense_date).toLocaleDateString()}</TableCell>
                                                        <TableCell className="font-bold">${parseFloat(expense.amount).toLocaleString()}</TableCell>
                                                        <TableCell>
                                                            <Badge variant={expense.approval_status === 'approved' ? 'default' : 'secondary'}>
                                                                {expense.approval_status}
                                                            </Badge>
                                                        </TableCell>
                                                        <TableCell className="text-right space-x-1">
                                                            <Button variant="ghost" size="icon" className="text-slate-400" onClick={() => openEditExpense(expense)}><Pencil className="size-4" /></Button>
                                                            <Button variant="ghost" size="icon" className="text-red-500" onClick={() => deleteExpense(expense.id)}><Trash2 className="size-4" /></Button>
                                                        </TableCell>
                                                    </TableRow>
                                                ))}
                                            </TableBody>
                                        </Table>
                                    </CardContent>
                                </Card>
                            </div>
                        )}

                        {activeTab === 'attachments' && (
                            <Card className="border-none shadow-sm">
                                <CardHeader className="flex flex-row items-center justify-between">
                                    <CardTitle className="text-lg font-bold">Attachments ({affaire.attachments?.length || 0})</CardTitle>
                                    <Button size="sm">Upload</Button>
                                </CardHeader>
                                <CardContent>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        {affaire.attachments?.map((att) => (
                                            <div key={att.id} className="p-4 rounded-xl border border-slate-100 dark:border-slate-800 flex items-center justify-between group">
                                                <div className="flex items-center gap-3">
                                                    <div className="size-10 rounded-lg bg-red-50 dark:bg-red-900/20 flex items-center justify-center text-red-600 font-black text-[10px]">
                                                        PDF
                                                    </div>
                                                    <div>
                                                        <p className="text-sm font-bold truncate max-w-[150px]">{att.original_name}</p>
                                                        <p className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">{att.category || 'General'}</p>
                                                    </div>
                                                </div>
                                                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                                    <Button variant="ghost" size="icon" className="size-8"><Download className="size-4" /></Button>
                                                    <Button variant="ghost" size="icon" className="size-8 text-red-500"><Trash2 className="size-4" /></Button>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                    {(!affaire.attachments || affaire.attachments.length === 0) && (
                                        <div className="p-12 text-center border-2 border-dashed rounded-2xl border-slate-100 dark:border-slate-800">
                                            <p className="text-slate-400 font-bold">No files uploaded yet</p>
                                        </div>
                                    )}
                                </CardContent>
                            </Card>
                        )}
                    </div>

                    <div className="space-y-6">
                        {/* Right Sidebar Info */}
                        <Card className="border-none shadow-sm bg-blue-600 text-white overflow-hidden">
                            <CardContent className="p-6 relative">
                                <div className="absolute top-0 right-0 p-8 opacity-10">
                                    <Briefcase className="size-24" />
                                </div>
                                <h4 className="text-xs font-black uppercase tracking-widest opacity-70">Client</h4>
                                <h3 className="text-xl font-black mt-1">{affaire.businessContact?.name}</h3>
                                <div className="mt-6 space-y-4">
                                    <div>
                                        <p className="text-[10px] font-black uppercase tracking-widest opacity-60">Status</p>
                                        <Badge className="bg-white/20 hover:bg-white/30 text-white border-none mt-1">In Progress</Badge>
                                    </div>
                                    <div>
                                        <p className="text-[10px] font-black uppercase tracking-widest opacity-60">Owner</p>
                                        <p className="text-sm font-bold mt-1">Jane Cooper</p>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>

                        <Card className="border-none shadow-sm">
                            <CardHeader>
                                <CardTitle className="text-md font-bold">Financial Summary</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="flex justify-between items-center pb-4 border-b">
                                    <span className="text-sm text-slate-500">Total Budget</span>
                                    <span className="font-bold">$250,000.00</span>
                                </div>
                                <div className="flex justify-between items-center pb-4 border-b">
                                    <span className="text-sm text-slate-500">Total Expenses</span>
                                    <span className="font-bold text-red-600">
                                        ${affaire.expenses?.reduce((acc, curr) => acc + parseFloat(curr.amount), 0).toLocaleString()}
                                    </span>
                                </div>
                                <div className="flex justify-between items-center">
                                    <span className="text-sm text-slate-500">Remaining</span>
                                    <span className="font-bold text-green-600">$225,320.00</span>
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                </div>
            </div>

            <Modal show={expenseModal} onClose={() => setExpenseModal(false)}>
                <form onSubmit={submitExpense} className="p-8">
                    <h2 className="text-2xl font-black text-slate-900 dark:text-white">{editExpense ? 'Edit Expense' : 'Add Expense'}</h2>
                    <p className="text-sm text-slate-500 mb-8 mt-1 font-bold">Log an expense for this affaire.</p>
                    
                    <div className="space-y-6">
                        <div>
                            <InputLabel htmlFor="amount" value="Amount" className="font-black uppercase text-[10px] tracking-widest mb-2" />
                            <TextInput id="amount" type="number" step="0.01" className="mt-1 block w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-800 rounded-xl" value={expenseForm.data.amount} onChange={e => expenseForm.setData('amount', e.target.value)} required />
                            <InputError message={expenseForm.errors.amount} className="mt-2" />
                        </div>
                        
                        <div>
                            <InputLabel htmlFor="expense_date" value="Date" className="font-black uppercase text-[10px] tracking-widest mb-2" />
                            <TextInput id="expense_date" type="date" className="mt-1 block w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-800 rounded-xl" value={expenseForm.data.expense_date} onChange={e => expenseForm.setData('expense_date', e.target.value)} required />
                            <InputError message={expenseForm.errors.expense_date} className="mt-2" />
                        </div>

                        <div>
                            <InputLabel htmlFor="approval_status" value="Approval Status" className="font-black uppercase text-[10px] tracking-widest mb-2" />
                            <select id="approval_status" className="mt-1 block w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-800 rounded-xl text-sm" value={expenseForm.data.approval_status} onChange={e => expenseForm.setData('approval_status', e.target.value)}>
                                <option value="pending">Pending</option>
                                <option value="approved">Approved</option>
                                <option value="rejected">Rejected</option>
                            </select>
                            <InputError message={expenseForm.errors.approval_status} className="mt-2" />
                        </div>
                    </div>

                    <div className="mt-10 flex justify-end gap-3">
                        <Button variant="ghost" onClick={() => setExpenseModal(false)} className="font-bold">Cancel</Button>
                        <Button disabled={expenseForm.processing} className="px-8 bg-blue-600 hover:bg-blue-700 font-black uppercase tracking-widest text-xs">
                            {editExpense ? 'Update Expense' : 'Add Expense'}
                        </Button>
                    </div>
                </form>
            </Modal>
        </AuthenticatedLayout>
    );
}