
import { Card } from "@/common/components/ui/card";
import { Badge } from "@/common/components/ui/badge";
import { MoreVertical, Calendar, MapPin, Building2, Users } from "lucide-react";
import { format } from "date-fns";
import {type DraggableProvided } from "@hello-pangea/dnd";
import { ShiftStatus } from "@/dataconnect-generated";

interface TaskCardProps {
    task: any; // Using any for Shift data from Data Connect
    provided?: DraggableProvided;
    onClick: () => void;
    itemHeight?: "compact" | "normal" | "comfortable";
    conditionalColoring?: boolean;
}

const statusConfig: Record<string, { bg: string; border: string; text: string; label: string }> = {
    [ShiftStatus.OPEN]: { bg: "bg-slate-500/10", border: "border-slate-500/20", text: "text-slate-700", label: "Open" },
    [ShiftStatus.PENDING]: { bg: "bg-blue-500/10", border: "border-blue-500/20", text: "text-blue-700", label: "Pending" },
    [ShiftStatus.CONFIRMED]: { bg: "bg-emerald-500/10", border: "border-emerald-500/20", text: "text-emerald-700", label: "Confirmed" },
    [ShiftStatus.IN_PROGRESS]: { bg: "bg-amber-500/10", border: "border-amber-500/20", text: "text-amber-700", label: "In Progress" },
    [ShiftStatus.COMPLETED]: { bg: "bg-green-500/10", border: "border-green-500/20", text: "text-green-700", label: "Completed" }
};

/**
 * TaskCard Component refactored for Shifts
 * Renders a single shift card in the Kanban board.
 */
export default function TaskCard({
    task,
    provided,
    onClick,
    itemHeight = "normal",
    conditionalColoring = true
}: TaskCardProps) {
    const heightClasses = {
        compact: "p-3",
        normal: "p-5",
        comfortable: "p-6"
    };

    const cardPadding = heightClasses[itemHeight] || heightClasses.normal;
    const status = statusConfig[task.status] || statusConfig[ShiftStatus.OPEN];
    
    const staffingProgress = task.workersNeeded > 0 ? (task.filled / task.workersNeeded) * 100 : 0;
    const progressColor = staffingProgress === 100 ? "bg-emerald-500" : "bg-primary";

    return (
        <Card
            ref={provided?.innerRef}
            {...provided?.draggableProps}
            {...provided?.dragHandleProps}
            onClick={onClick}
            className={`bg-white border border-border/50 hover:shadow-xl hover:border-primary/20 transition-premium cursor-pointer mb-3 rounded-2xl group`}
        >
            <div className={cardPadding}>
                {/* Client & Header */}
                <div className="flex flex-col gap-1 mb-3">
                    <div className="flex items-center gap-1.5 text-[10px] font-bold text-primary uppercase tracking-wider">
                        <Building2 className="w-3 h-3" />
                        {task.order?.business?.businessName || "No Client"}
                    </div>
                    <div className="flex items-start justify-between">
                        <h4 className="font-medium text-foreground text-sm flex-1 tracking-tight leading-snug group-hover:text-primary transition-colors">
                            {task.title}
                        </h4>
                        <button className="text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity">
                            <MoreVertical className="w-4 h-4" />
                        </button>
                    </div>
                </div>

                {/* Event Name */}
                {task.order?.eventName && (
                    <p className="text-[11px] text-muted-foreground mb-4 font-medium italic">
                        {task.order.eventName}
                    </p>
                )}

                {/* Status & Date */}
                <div className="flex items-center justify-between mb-4">
                    <Badge className={`${status.bg} ${status.text} ${status.border} text-[10px] font-medium uppercase tracking-wider px-2 py-0.5 border shadow-none ring-0`}>
                        {status.label}
                    </Badge>
                    {task.date && (
                        <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground font-medium">
                            <Calendar className="w-3.5 h-3.5 text-primary/60" />
                            {format(new Date(task.date), 'd MMM yyyy')}
                        </div>
                    )}
                </div>

                {/* Staffing Progress */}
                <div className="mb-4">
                    <div className="flex items-center justify-between mb-1.5">
                        <div className="flex items-center gap-1.5 text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
                            <Users className="w-3 h-3" />
                            Staffing: {task.filled}/{task.workersNeeded}
                        </div>
                        <span className="text-[10px] font-medium text-muted-foreground tabular-nums">{Math.round(staffingProgress)}%</span>
                    </div>
                    <div className="h-1.5 bg-muted rounded-full overflow-hidden shadow-inner">
                        <div
                            className={`h-full ${progressColor} transition-all duration-700 ease-out`}
                            style={{ width: `${staffingProgress}%` }}
                        />
                    </div>
                </div>

                {/* Footer: Location */}
                {task.location && (
                    <div className="flex items-center gap-1.5 pt-3 border-t border-border/40 text-[11px] text-muted-foreground font-medium">
                        <MapPin className="w-3.5 h-3.5 text-primary/60" />
                        <span className="truncate">{task.location}</span>
                    </div>
                )}
            </div>
        </Card>
    );
}
