import ProjectLayout from '../../../../../ProjectManagement/resources/js/Layouts/ProjectLayout';
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
import { Button } from '@/Components/ui/button';
import { Badge } from '@/Components/ui/badge';
import { ChevronDown, ChevronUp, Play, CheckCircle2, Trash2, Download, Upload, Loader2, Plus, Package } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/Components/ui/dialog';
import { Input } from '@/Components/ui/input';
import { Form, FormField } from '@/Components/ui/form';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
import { useForm, router } from '@inertiajs/react';
import { Fragment, useState, useRef, FormEvent, useMemo } from 'react';
import MaterialPickerModal from '@/Components/MaterialPickerModal';
import KanbanBoard from '../../Components/KanbanBoard';
import { LayoutList, Kanban, Activity as ActivityIcon } from 'lucide-react';
import { Textarea } from '@/Components/ui/textarea';

export default function Tasks({ project, employees, availableMaterials, delayReasons, weatherConditions }: any) {
    const [addTaskOpen, setAddTaskOpen] = useState(false);
    const [expandedTask, setExpandedTask] = useState<number | null>(null);
    const [addMaterialTaskId, setAddMaterialTaskId] = useState<string | null>(null);
    const [addDelayTaskId, setAddDelayTaskId] = useState<string | null>(null);
    const [importOpen, setImportOpen] = useState(false);
    const [importUploading, setImportUploading] = useState(false);
    const [viewMode, setViewMode] = useState<'board' | 'table'>('board');
    const [detailsTaskUlid, setDetailsTaskUlid] = useState<string | null>(null);
    const importRef = useRef<HTMLInputElement>(null);

    const taskForm = useForm({
        name: '', description: '', assigned_users: [] as string[], labor_cost: '', estimated_hours: '', start_date: '', end_date: '',
    });

    const employeeSelectItems = useMemo(() => employees?.map((e: any) => ({ value: e.ulid, label: e.name })) || [], [employees]);

    const formatCurrency = (v: string) => new Intl.NumberFormat('en-PH', { style: 'currency', currency: 'PHP' }).format(Number(v));
    const statusLabel = (s: string) => s.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());

    const handleAddTask = (e: FormEvent) => {
        e.preventDefault();
        taskForm.post(route('projects.tasks.store', project.ulid), {
            onSuccess: () => { taskForm.reset(); setAddTaskOpen(false); },
        });
    };

    const handleTaskTransition = (taskUlid: string, status: string) => {
        router.patch(route('projects.tasks.transition', [project.ulid, taskUlid]), { status });
    };

    const handleDeleteTask = (taskUlid: string) => {
        if (confirm('Delete this task?')) {
            router.delete(route('projects.tasks.destroy', [project.ulid, taskUlid]));
        }
    };

    const handleUpdateMaterial = (taskUlid: string, tmUlid: string, field: string, value: string) => {
        router.put(route('projects.tasks.materials.update', [project.ulid, taskUlid, tmUlid]), {
            [field]: value,
        }, { preserveScroll: true });
    };

    const handleDeleteMaterial = (taskUlid: string, tmUlid: string) => {
        if (confirm('Remove this material from the task?')) {
            router.delete(route('projects.tasks.materials.destroy', [project.ulid, taskUlid, tmUlid]), { preserveScroll: true });
        }
    };

    const handleReorder = (reorderedTasks: any[]) => {
        router.post(route('projects.tasks.reorder', project.ulid), { tasks: reorderedTasks }, { preserveScroll: true, preserveState: true });
    };

    const detailsTask = detailsTaskUlid ? project?.tasks?.find((t: any) => t.ulid === detailsTaskUlid) : null;

    if (!project) {
        return <ProjectLayout project={null} currentTab="tasks" children={null} />;
    }

    return (
        <ProjectLayout project={project} currentTab="tasks">
            <Card className={viewMode === 'board' ? "flex flex-col flex-1 border-0 shadow-none bg-transparent" : ""}>
                <CardHeader className={viewMode === 'board' ? "px-0 pt-0 pb-4" : ""}>
                    <div className="flex items-center justify-between">
                        <CardTitle>Tasks</CardTitle>
                        <div className="flex items-center gap-2">
                            <div className="flex bg-gray-100 p-1 rounded-md mr-2">
                                <Button 
                                    variant={viewMode === 'board' ? 'secondary' : 'ghost'} 
                                    size="sm" 
                                    className="h-7 px-2"
                                    onClick={() => setViewMode('board')}
                                >
                                    <Kanban className="h-4 w-4 mr-1" /> Board
                                </Button>
                                <Button 
                                    variant={viewMode === 'table' ? 'secondary' : 'ghost'} 
                                    size="sm" 
                                    className="h-7 px-2"
                                    onClick={() => setViewMode('table')}
                                >
                                    <LayoutList className="h-4 w-4 mr-1" /> Table
                                </Button>
                            </div>
                            <a href={route('projects.tasks.template', project.ulid)}>
                                <Button variant="outline" size="sm"><Download className="mr-2 h-4 w-4" /> Template</Button>
                            </a>
                            <Dialog open={importOpen} onOpenChange={(open) => { setImportOpen(open); if (!open && importRef.current) importRef.current.value = ''; }}>
                            <DialogTrigger><Button variant="outline" size="sm"><Upload className="mr-2 h-4 w-4" /> Import Tasks</Button></DialogTrigger>
                                <DialogContent>
                                    <DialogHeader><DialogTitle>Import Tasks from Excel</DialogTitle></DialogHeader>
                                    <form onSubmit={(e) => {
                                        e.preventDefault();
                                        const file = importRef.current?.files?.[0];
                                        if (!file) return;
                                        setImportUploading(true);
                                        const formData = new FormData();
                                        formData.append('file', file);
                                        router.post(route('projects.tasks.import', project.ulid), { file }, {
                                            forceFormData: true,
                                            onSuccess: () => { setImportOpen(false); if (importRef.current) importRef.current.value = ''; },
                                            onFinish: () => setImportUploading(false),
                                        });
                                    }} className="space-y-4">
                                        <div>
                                            <Input ref={importRef} type="file" accept=".xlsx,.csv,.xls" />
                                        </div>
                                        <div className="flex justify-end">
                                            <Button type="submit" disabled={importUploading}>
                                                {importUploading ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Importing...</>
                                                    : <><Upload className="mr-2 h-4 w-4" /> Import</>}
                                            </Button>
                                        </div>
                                    </form>
                                </DialogContent>
                            </Dialog>
                            <Dialog open={addTaskOpen} onOpenChange={setAddTaskOpen}>
                                <DialogTrigger>
                                    <Button size="sm"><Plus className="mr-2 h-4 w-4" /> Add Task</Button>
                                </DialogTrigger>
                                <DialogContent>
                                    <DialogHeader><DialogTitle>Add Task</DialogTitle></DialogHeader>
                                    <Form onSubmit={handleAddTask}>
                                        <FormField label="Task Name" htmlFor="task_name" required error={taskForm.errors.name}>
                                            <Input id="task_name" value={taskForm.data.name} onChange={(e) => taskForm.setData('name', e.target.value)} />
                                        </FormField>
                                        <FormField label="Description" htmlFor="description" error={taskForm.errors.description}>
                                            <Textarea id="description" value={taskForm.data.description} onChange={(e) => taskForm.setData('description', e.target.value)} />
                                        </FormField>
                                        <div className="grid grid-cols-2 gap-4">
                                            <FormField label="Start Date" htmlFor="start_date" error={taskForm.errors.start_date}>
                                                <Input type="date" id="start_date" value={taskForm.data.start_date} onChange={(e) => taskForm.setData('start_date', e.target.value)} />
                                            </FormField>
                                            <FormField label="End Date" htmlFor="end_date" error={taskForm.errors.end_date}>
                                                <Input type="date" id="end_date" value={taskForm.data.end_date} onChange={(e) => taskForm.setData('end_date', e.target.value)} />
                                            </FormField>
                                        </div>
                                        <div className="grid grid-cols-2 gap-4">
                                            <FormField label="Estimated Hours" htmlFor="estimated_hours" error={taskForm.errors.estimated_hours}>
                                                <Input type="number" step="0.1" id="estimated_hours" value={taskForm.data.estimated_hours} onChange={(e) => taskForm.setData('estimated_hours', e.target.value)} />
                                            </FormField>
                                            <FormField label="Assignees (Ctrl/Cmd+Click)" htmlFor="assigned_users" error={taskForm.errors.assigned_users as any}>
                                                <select
                                                    id="assigned_users"
                                                    multiple
                                                    value={taskForm.data.assigned_users}
                                                    onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
                                                        const values = Array.from(e.target.selectedOptions, option => option.value);
                                                        taskForm.setData('assigned_users', values);
                                                    }}
                                                    className="flex w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
                                                >
                                                    {employeeSelectItems.map((opt: any) => (
                                                        <option key={opt.value} value={opt.value}>{opt.label}</option>
                                                    ))}
                                                </select>
                                            </FormField>
                                        </div>
                                        <div className="flex justify-end mt-4">
                                            <Button type="submit" disabled={taskForm.processing}><Plus className="mr-2 h-4 w-4" /> Add</Button>
                                        </div>
                                    </Form>
                                </DialogContent>
                            </Dialog>
                        </div>
                    </div>
                </CardHeader>
                <CardContent className={viewMode === 'board' ? "flex-1 p-0 overflow-hidden" : ""}>
                    {viewMode === 'board' ? (
                        <KanbanBoard 
                            tasks={project?.tasks || []} 
                            onReorder={handleReorder} 
                            onTaskClick={(ulid: string) => setDetailsTaskUlid(ulid)} 
                        />
                    ) : (
                        <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead></TableHead>
                                <TableHead>Task</TableHead>
                                <TableHead>Assignee</TableHead>
                                <TableHead>Status</TableHead>
                                <TableHead className="text-right">Labor</TableHead>
                                <TableHead className="text-right">Material</TableHead>
                                <TableHead className="text-right">Total Cost</TableHead>
                                <TableHead className="text-right">Actions</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {!project || project.tasks?.length === 0 ? (
                                <TableRow><TableCell colSpan={8} className="text-center text-gray-500 py-8">{!project ? 'Please select a project to view tasks.' : 'No tasks yet.'}</TableCell></TableRow>
                            ) : (
                                project.tasks?.map((task: any) => (
                                    <Fragment key={task.id}>
                                        <TableRow key={task.id}>
                                            <TableCell>
                                                <Button variant="ghost" size="icon-sm" onClick={() => setExpandedTask(expandedTask === task.id ? null : task.id)}>
                                                    {expandedTask === task.id ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                                                </Button>
                                            </TableCell>
                                            <TableCell className="font-medium">{task.name}</TableCell>
                                            <TableCell className="text-gray-500">{task.users?.map((u: any) => u.name).join(', ') || '-'}</TableCell>
                                            <TableCell><Badge variant="outline">{statusLabel(task.status)}</Badge></TableCell>
                                            <TableCell className="text-right text-sm tabular-nums">{formatCurrency(task.labor_cost)}</TableCell>
                                            <TableCell className="text-right text-sm tabular-nums">{formatCurrency(String(task.material_cost))}</TableCell>
                                            <TableCell className="text-right text-sm font-medium tabular-nums">{formatCurrency(String(task.total_cost))}</TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex items-center justify-end gap-1">
                                                    {task.status === 'pending' && (
                                                        <Button variant="ghost" size="icon-sm" title="Start" onClick={() => handleTaskTransition(task.ulid, 'in_progress')}>
                                                            <Play className="h-4 w-4 text-blue-500" />
                                                        </Button>
                                                    )}
                                                    {task.status === 'in_progress' && (
                                                        <Button variant="ghost" size="icon-sm" title="Complete" onClick={() => handleTaskTransition(task.ulid, 'completed')}>
                                                            <CheckCircle2 className="h-4 w-4 text-green-500" />
                                                        </Button>
                                                    )}
                                                    <Button variant="ghost" size="icon-sm" title="Delete" onClick={() => handleDeleteTask(task.ulid)}>
                                                        <Trash2 className="h-4 w-4 text-red-500" />
                                                    </Button>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                        {expandedTask === task.id && (
                                            <TableRow key={`${task.id}-materials`}>
                                                <TableCell colSpan={8} className="bg-gray-50/50 p-4">
                                                    <div className="space-y-3">
                                                        <div className="flex items-center justify-between">
                                                            <h4 className="text-sm font-medium flex items-center gap-2">
                                                                <Package className="h-4 w-4 text-gray-500" /> Materials
                                                            </h4>
                                                            <Button variant="outline" size="sm" onClick={() => setAddMaterialTaskId(task.ulid)}>
                                                                <Plus className="mr-1 h-3 w-3" /> Add Materials
                                                            </Button>
                                                            <MaterialPickerModal
                                                                open={addMaterialTaskId === task.ulid}
                                                                onOpenChange={(open) => setAddMaterialTaskId(open ? task.ulid : null)}
                                                                projectUlid={project.ulid}
                                                                taskUlid={task.ulid}
                                                                availableMaterials={availableMaterials}
                                                                existingMaterialIds={task.task_materials?.map((tm: any) => tm.material?.ulid).filter(Boolean) as string[]}
                                                            />
                                                        </div>
                                                        {task.task_materials?.length === 0 ? (
                                                            <p className="text-sm text-gray-400 italic py-2">No materials assigned to this task.</p>
                                                        ) : (
                                                            <Table>
                                                                <TableHeader>
                                                                    <TableRow>
                                                                        <TableHead>Material</TableHead>
                                                                        <TableHead>Unit</TableHead>
                                                                        <TableHead className="text-right">Unit Cost</TableHead>
                                                                        <TableHead className="text-right">Planned</TableHead>
                                                                        <TableHead className="text-right">Actual</TableHead>
                                                                        <TableHead className="text-right">Cost</TableHead>
                                                                        <TableHead className="text-right">Actions</TableHead>
                                                                    </TableRow>
                                                                </TableHeader>
                                                                <TableBody>
                                                                    {task.task_materials?.map((tm: any) => {
                                                                        const actualQty = Number(tm.actual_qty);
                                                                        const plannedQty = Number(tm.planned_qty);
                                                                        const cost = (actualQty > 0 ? actualQty : plannedQty) * Number(tm.unit_cost);
                                                                        return (
                                                                            <TableRow key={tm.id}>
                                                                                <TableCell className="font-medium text-sm">
                                                                                    {tm.material.name}
                                                                                </TableCell>
                                                                                <TableCell className="text-sm text-gray-500">{tm.material.unit}</TableCell>
                                                                                <TableCell className="text-right text-sm tabular-nums">{formatCurrency(tm.unit_cost)}</TableCell>
                                                                                <TableCell className="text-right text-sm tabular-nums">{plannedQty}</TableCell>
                                                                                <TableCell className="text-right">
                                                                                    <Input
                                                                                        type="number" step="0.01" min="0"
                                                                                        className="w-20 text-right text-sm h-8 ml-auto"
                                                                                        defaultValue={tm.actual_qty}
                                                                                        onBlur={(e) => {
                                                                                            if (e.target.value !== tm.actual_qty) {
                                                                                                handleUpdateMaterial(task.ulid, tm.ulid, 'actual_qty', e.target.value);
                                                                                            }
                                                                                        }}
                                                                                    />
                                                                                </TableCell>
                                                                                <TableCell className="text-right text-sm font-medium tabular-nums">{formatCurrency(String(cost))}</TableCell>
                                                                                <TableCell className="text-right">
                                                                                    <Button variant="ghost" size="icon-sm" title="Remove" onClick={() => handleDeleteMaterial(task.ulid, tm.ulid)}>
                                                                                        <Trash2 className="h-3.5 w-3.5 text-red-500" />
                                                                                    </Button>
                                                                                </TableCell>
                                                                            </TableRow>
                                                                        );
                                                                    })}
                                                                </TableBody>
                                                            </Table>
                                                        )}
                                                    </div>
                                                </TableCell>
                                            </TableRow>
                                        )}
                                    </Fragment>
                                ))
                            )}
                        </TableBody>
                    </Table>
                    )}
                </CardContent>
            </Card>

            {/* Task Details Dialog for Kanban Mode */}
            <Dialog open={!!detailsTaskUlid} onOpenChange={(open) => !open && setDetailsTaskUlid(null)}>
                <DialogContent className="max-w-3xl max-h-[85vh] overflow-y-auto">
                    <DialogHeader>
                        <DialogTitle>{detailsTask?.name} - Details</DialogTitle>
                    </DialogHeader>
                    {detailsTask && (
                        <div className="space-y-6">
                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <p className="text-sm text-gray-500">Status</p>
                                    <Badge variant="outline">{statusLabel(detailsTask.status)}</Badge>
                                </div>
                                <div>
                                    <p className="text-sm text-gray-500">Assignees</p>
                                    <p className="text-sm">{detailsTask.users?.map((u: any) => u.name).join(', ') || 'Unassigned'}</p>
                                </div>
                                <div>
                                    <p className="text-sm text-gray-500">Total Cost</p>
                                    <p className="text-sm font-medium">{formatCurrency(detailsTask.total_cost)}</p>
                                </div>
                                <div>
                                    <p className="text-sm text-gray-500">Estimated Hours</p>
                                    <p className="text-sm">{detailsTask.estimated_hours || 0}h</p>
                                </div>
                            </div>
                            
                            <div className="border-t pt-4 space-y-3">
                                <div className="flex items-center justify-between">
                                    <h4 className="text-sm font-medium flex items-center gap-2">
                                        <Package className="h-4 w-4 text-gray-500" /> Materials
                                    </h4>
                                    <Button variant="outline" size="sm" onClick={() => setAddMaterialTaskId(detailsTask.ulid)}>
                                        <Plus className="mr-1 h-3 w-3" /> Add Materials
                                    </Button>
                                    <MaterialPickerModal
                                        open={addMaterialTaskId === detailsTask.ulid}
                                        onOpenChange={(open) => setAddMaterialTaskId(open ? detailsTask.ulid : null)}
                                        projectUlid={project.ulid}
                                        taskUlid={detailsTask.ulid}
                                        availableMaterials={availableMaterials}
                                        existingMaterialIds={detailsTask.task_materials?.map((tm: any) => tm.material?.ulid).filter(Boolean) as string[]}
                                    />
                                </div>
                                {detailsTask.task_materials?.length === 0 ? (
                                    <p className="text-sm text-gray-400 italic py-2">No materials assigned to this task.</p>
                                ) : (
                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead>Material</TableHead>
                                                <TableHead>Unit</TableHead>
                                                <TableHead className="text-right">Unit Cost</TableHead>
                                                <TableHead className="text-right">Planned</TableHead>
                                                <TableHead className="text-right">Actual</TableHead>
                                                <TableHead className="text-right">Cost</TableHead>
                                                <TableHead className="text-right">Actions</TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {detailsTask.task_materials?.map((tm: any) => {
                                                const actualQty = Number(tm.actual_qty);
                                                const plannedQty = Number(tm.planned_qty);
                                                const cost = (actualQty > 0 ? actualQty : plannedQty) * Number(tm.unit_cost);
                                                return (
                                                    <TableRow key={tm.id}>
                                                        <TableCell className="font-medium text-sm">
                                                            {tm.material.name}
                                                        </TableCell>
                                                        <TableCell className="text-sm text-gray-500">{tm.material.unit}</TableCell>
                                                        <TableCell className="text-right text-sm tabular-nums">{formatCurrency(tm.unit_cost)}</TableCell>
                                                        <TableCell className="text-right text-sm tabular-nums">{plannedQty}</TableCell>
                                                        <TableCell className="text-right">
                                                            <Input
                                                                type="number" step="0.01" min="0"
                                                                className="w-20 text-right text-sm h-8 ml-auto"
                                                                defaultValue={tm.actual_qty}
                                                                onBlur={(e) => {
                                                                    if (e.target.value !== tm.actual_qty) {
                                                                        handleUpdateMaterial(detailsTask.ulid, tm.ulid, 'actual_qty', e.target.value);
                                                                    }
                                                                }}
                                                            />
                                                        </TableCell>
                                                        <TableCell className="text-right text-sm font-medium tabular-nums">{formatCurrency(String(cost))}</TableCell>
                                                        <TableCell className="text-right">
                                                            <Button variant="ghost" size="icon-sm" title="Remove" onClick={() => handleDeleteMaterial(detailsTask.ulid, tm.ulid)}>
                                                                <Trash2 className="h-3.5 w-3.5 text-red-500" />
                                                            </Button>
                                                        </TableCell>
                                                    </TableRow>
                                                );
                                            })}
                                        </TableBody>
                                    </Table>
                                )}
                            </div>

                            <div className="border-t pt-4 space-y-3">
                                <h4 className="text-sm font-medium flex items-center gap-2">
                                    <ActivityIcon className="h-4 w-4 text-gray-500" /> Activity Log
                                </h4>
                                {detailsTask.activities?.length === 0 ? (
                                    <p className="text-sm text-gray-400 italic py-2">No activities logged yet.</p>
                                ) : (
                                    <div className="space-y-4">
                                        <div className="relative border-l-2 border-gray-100 ml-2.5 space-y-6">
                                            {detailsTask.activities?.map((activity: any, idx: number) => (
                                                <div key={activity.id} className="relative ml-6">
                                                    <span className="absolute -left-[35px] flex items-center justify-center w-5 h-5 bg-white rounded-full ring-4 ring-white border">
                                                        <ActivityIcon className="w-3 h-3 text-blue-500" />
                                                    </span>
                                                    <div className="text-sm">
                                                        <span className="font-semibold text-gray-900">{activity.user?.name}</span>
                                                        <span className="text-gray-600"> {activity.description}</span>
                                                    </div>
                                                    <time className="block text-xs font-medium text-gray-400 mt-1">
                                                        {new Date(activity.created_at).toLocaleString()}
                                                    </time>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </DialogContent>
            </Dialog>
        </ProjectLayout>
    );
}