import React, { useState, useEffect } from 'react';
import { Button } from '../components/ui/Button';

interface Lead {
    id: number;
    lead_id: string;
    applicant_name: string;
    lead_type: string;
    loan_amount: number;
    priority: string;
    assigned_to_name: string;
}

interface Stage {
    id: number;
    name: string;
    display_order: number;
    color: string;
    lead_count: number;
    leads: Lead[];
}

export const KanbanBoard: React.FC = () => {
    const [stages, setStages] = useState<Stage[]>([]);
    const [draggedLead, setDraggedLead] = useState<Lead | null>(null);

    useEffect(() => {
        // TODO: Fetch kanban data from API
        // fetch('/api/pipelines/1/kanban').then(...)
    }, []);

    const handleDragStart = (lead: Lead) => {
        setDraggedLead(lead);
    };

    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
    };

    const handleDrop = async (stageId: number) => {
        if (!draggedLead) return;

        // TODO: Call API to move lead
        // await fetch(`/api/pipelines/leads/${draggedLead.id}/move`, {
        //   method: 'PUT',
        //   body: JSON.stringify({ stageId })
        // });

        setDraggedLead(null);
    };

    return (
        <div className="p-6 h-full flex flex-col">
            <div className="mb-6 flex items-center justify-between">
                <h1 className="text-2xl font-bold text-slate-900">Pipeline Board</h1>
                <Button>Add Lead</Button>
            </div>

            <div className="flex-1 overflow-x-auto">
                <div className="flex gap-4 min-w-max h-full pb-4">
                    {stages.map((stage) => (
                        <div
                            key={stage.id}
                            className="w-80 flex-shrink-0 flex flex-col rounded-lg bg-slate-100 p-4"
                            onDragOver={handleDragOver}
                            onDrop={() => handleDrop(stage.id)}
                        >
                            <div className="mb-4 flex justify-between items-center">
                                <h3 className="font-medium text-slate-700 flex items-center gap-2">
                                    <span
                                        className="w-3 h-3 rounded-full"
                                        style={{ backgroundColor: stage.color }}
                                    ></span>
                                    {stage.name}
                                </h3>
                                <span className="bg-slate-200 text-slate-600 text-xs px-2 py-1 rounded-full">
                                    {stage.lead_count}
                                </span>
                            </div>

                            <div className="flex-1 space-y-3 overflow-y-auto">
                                {stage.leads.map((lead) => (
                                    <div
                                        key={lead.id}
                                        draggable
                                        onDragStart={() => handleDragStart(lead)}
                                        className="bg-white p-4 rounded-lg shadow-sm border border-slate-200 cursor-move hover:shadow-md transition-shadow"
                                    >
                                        <div className="flex justify-between items-start mb-2">
                                            <p className="font-medium text-sm">{lead.applicant_name}</p>
                                            <span
                                                className={`text-xs px-2 py-1 rounded ${lead.priority === 'High'
                                                        ? 'bg-red-100 text-red-700'
                                                        : lead.priority === 'Medium'
                                                            ? 'bg-yellow-100 text-yellow-700'
                                                            : 'bg-green-100 text-green-700'
                                                    }`}
                                            >
                                                {lead.priority}
                                            </span>
                                        </div>
                                        <p className="text-xs text-slate-500 mb-1">{lead.lead_type}</p>
                                        <p className="text-xs text-slate-600 font-medium">
                                            ₹{lead.loan_amount?.toLocaleString('en-IN')}
                                        </p>
                                        <p className="text-xs text-slate-500 mt-2">
                                            Assigned: {lead.assigned_to_name || 'Unassigned'}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};
