'use client';

import { X, Calendar, User, Stethoscope, Clock, CheckCircle2, AlertCircle, FileText } from 'lucide-react';
import Image from 'next/image';
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";

export default function ConsultationModal({ consultation, onClose }) {
    const getStatusBadge = (status) => {
        switch (status) {
            case 'active':
                return (
                    <Badge variant="outline" className="gap-1 border-blue-300 bg-blue-50 text-blue-800">
                        <Clock className="h-3 w-3 text-blue-600" />
                        Active
                    </Badge>
                );
            case 'completed':
                return (
                    <Badge variant="outline" className="gap-1 border-green-300 bg-green-50 text-green-800">
                        <CheckCircle2 className="h-3 w-3 text-green-600" />
                        Completed
                    </Badge>
                );
            case 'pending':
                return (
                    <Badge variant="outline" className="gap-1 border-amber-300 bg-amber-50 text-amber-800">
                        <Clock className="h-3 w-3 text-amber-600" />
                        Pending
                    </Badge>
                );
            default:
                return (
                    <Badge variant="outline" className="gap-1 border-gray-300 bg-gray-50 text-gray-800">
                        {status}
                    </Badge>
                );
        }
    };

    const getCalloutBadge = (status) => {
        switch (status) {
            case 'urgent':
                return <Badge variant="destructive">Urgent</Badge>;
            case 'follow-up':
                return <Badge variant="warning">Follow Up</Badge>;
            default:
                return null;
        }
    };

    return (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex justify-center items-center z-50" onClick={onClose}>
            <div
                onClick={(e) => e.stopPropagation()}
                className="bg-white max-w-4xl w-full rounded-lg p-6 relative shadow-lg overflow-y-auto max-h-[90vh]"
            >
                <button
                    onClick={onClose}
                    className="absolute top-4 right-4 p-1 rounded-full hover:bg-gray-100 transition-colors"
                >
                    <X size={20} className="text-gray-500" />
                </button>

                <div className="flex flex-col md:flex-row gap-6">
                    {/* Left Column - Consultation Overview */}
                    <div className="flex-1">
                        <div className="flex items-start justify-between mb-6">
                            <div>
                                <h2 className="text-2xl font-bold text-gray-900">
                                    Consultation #{consultation.id}
                                </h2>
                                <div className="flex items-center mt-2 gap-2">
                                    {getStatusBadge(consultation.status)}
                                    {consultation.callOutStatus !== 'none' && getCalloutBadge(consultation.callOutStatus)}
                                </div>
                            </div>
                            <div className="flex items-center text-sm text-gray-500">
                                <Calendar className="h-4 w-4 mr-1" />
                                {consultation.date}
                            </div>
                        </div>

                        <div className="space-y-4">
                            {/* Patient Information */}
                            <div className="p-4 border rounded-lg">
                                <h3 className="font-medium flex items-center mb-3">
                                    <User className="h-5 w-5 mr-2 text-blue-500" />
                                    Patient Information
                                </h3>
                                <div className="flex items-center gap-3">
                                    <Image
                                        src={consultation.imageUrl}
                                        alt={consultation.patientName}
                                        width={48}
                                        height={48}
                                        className="rounded-full border-2 border-white shadow-sm"
                                    />
                                    <div>
                                        <p className="font-medium">{consultation.patientName}</p>
                                        <p className="text-sm text-gray-500">Patient</p>
                                    </div>
                                </div>
                            </div>

                            {/* Doctor Information */}
                            <div className="p-4 border rounded-lg">
                                <h3 className="font-medium flex items-center mb-3">
                                    <Stethoscope className="h-5 w-5 mr-2 text-green-500" />
                                    Doctor Information
                                </h3>
                                <div className="flex items-center gap-3">
                                    <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center border-2 border-white">
                                        <Stethoscope className="h-5 w-5 text-gray-400" />
                                    </div>
                                    <div>
                                        <p className="font-medium">{consultation.doctorName}</p>
                                        <p className="text-sm text-gray-500">Doctor</p>
                                    </div>
                                </div>
                            </div>

                            {/* Consultation Details */}
                            <div className="p-4 border rounded-lg">
                                <h3 className="font-medium flex items-center mb-3">
                                    <FileText className="h-5 w-5 mr-2 text-purple-500" />
                                    Consultation Details
                                </h3>
                                <div className="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <p className="text-gray-500">Type</p>
                                        <p className="capitalize">{consultation.type || 'N/A'}</p>
                                    </div>
                                    <div>
                                        <p className="text-gray-500">Scheduled Time</p>
                                        <p>{consultation.scheduledAt}</p>
                                    </div>
                                    {consultation.type === 'video' && (
                                        <div className="col-span-2">
                                            <Button variant="outline" className="w-full">
                                                Join Video Consultation
                                            </Button>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Right Column - Notes and Actions */}
                    <div className="flex-1">
                        {/* Callout Message */}
                        {consultation.callOutMessage && (
                            <div className="p-4 mb-6 rounded-lg bg-amber-50 border border-amber-200">
                                <div className="flex items-start">
                                    <AlertCircle className="h-5 w-5 text-amber-600 mr-2 mt-0.5" />
                                    <div>
                                        <h3 className="font-medium text-amber-800">Important Note</h3>
                                        <p className="text-sm text-amber-700">{consultation.callOutMessage}</p>
                                    </div>
                                </div>
                            </div>
                        )}

                        {/* Consultation Notes */}
                        <div className="mb-6">
                            <h3 className="font-medium text-lg mb-2">Consultation Notes</h3>
                            <div className="bg-gray-50 p-4 rounded-lg border">
                                {consultation.notes ? (
                                    <p className="text-sm whitespace-pre-wrap">{consultation.notes}</p>
                                ) : (
                                    <p className="text-gray-500 text-sm">No notes available</p>
                                )}
                            </div>
                        </div>

                        {/* Admin Actions */}
                        <div>
                            <h3 className="font-medium text-lg mb-3">Admin Actions</h3>
                            <div className="space-y-2">
                                <Button variant="outline" className="w-full">
                                    Reschedule Consultation
                                </Button>
                                <Button variant="outline" className="w-full">
                                    Send Reminder
                                </Button>
                                {consultation.status === 'active' && (
                                    <Button variant="destructive" className="w-full">
                                        Cancel Consultation
                                    </Button>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}