import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { FileText, AlertCircle } from 'lucide-react';
import { RequestTemplate } from '@/hooks/useCreateRequestForm';
import { sanitizeHTML } from '@/utils/sanitizer';

interface AdminRequestReviewStepProps {
    template: RequestTemplate;
    formData: any;
    documents: File[];
}

export function AdminRequestReviewStep({
    template,
    formData,
    documents
}: AdminRequestReviewStepProps) {

    // Use template approvers if available, otherwise fallback (though should always be there for admin templates)
    const approvers = template.workflowApprovers || [];

    return (
        <div className="space-y-6 max-w-4xl mx-auto">
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
                <AlertCircle className="w-5 h-5 text-blue-600 mt-0.5" />
                <div>
                    <h4 className="font-semibold text-blue-900">Ready to Submit?</h4>
                    <p className="text-sm text-blue-700 mt-1">
                        Please review the details below. This request will follow the standardized approval workflow defined by the administrator.
                    </p>
                </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="md:col-span-2 space-y-6">
                    <Card>
                        <CardHeader className="pb-3">
                            <CardTitle className="text-lg">Request Overview</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="space-y-4">
                                <div>
                                    <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Title</span>
                                    <p className="text-base font-medium text-gray-900 mt-1">{formData.title}</p>
                                </div>
                                <div>
                                    <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Request Detail</span>
                                    <div
                                        className="text-sm text-gray-700 mt-1 prose prose-sm max-w-none"
                                        dangerouslySetInnerHTML={{ __html: sanitizeHTML(formData.description) }}
                                    />
                                </div>

                                {documents.length > 0 && (
                                    <div>
                                        <span className="text-xs font-semibold text-gray-500 uppercase tracking-wider block mb-2">Attachments ({documents.length})</span>
                                        <div className="flex flex-wrap gap-2">
                                            {documents.map((doc, i) => (
                                                <Badge key={i} variant="secondary" className="pl-1 pr-2 py-1 flex items-center gap-1.5 h-auto">
                                                    <FileText className="w-3 h-3 text-gray-500" />
                                                    <span className="truncate max-w-[150px]">{doc.name}</span>
                                                </Badge>
                                            ))}
                                        </div>
                                    </div>
                                )}
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="pb-3">
                            <CardTitle className="text-lg">Approval Workflow</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="relative pl-6 border-l-2 border-gray-100 space-y-8 py-2">
                                {approvers.map((approver: any, index: number) => (
                                    <div key={index} className="relative">
                                        {/* Timeline dot */}
                                        <div className="absolute -left-[31px] top-1 w-4 h-4 rounded-full bg-white border-2 border-blue-500 flex items-center justify-center">
                                            <div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
                                        </div>

                                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-100">
                                            <div className="flex justify-between items-start mb-1">
                                                <div>
                                                    <h5 className="font-semibold text-gray-800 text-sm">{approver.name || approver.email}</h5>
                                                    <p className="text-xs text-gray-500">Level {approver.level} Approver</p>
                                                </div>
                                                <Badge variant="outline" className="bg-white text-xs">
                                                    {approver.tat || 24} Hours TAT
                                                </Badge>
                                            </div>
                                            <p className="text-xs text-gray-400">{approver.email}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </CardContent>
                    </Card>
                </div>

                <div className="space-y-6">
                    <Card>
                        <CardHeader className="pb-3">
                            <CardTitle className="text-sm uppercase text-gray-500">Properties</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600">Template</span>
                                <span className="text-sm font-medium text-right">{template.name}</span>
                            </div>
                            <Separator />
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600">Priority</span>
                                <Badge className={
                                    template.priority === 'high' ? 'bg-red-100 text-red-700 hover:bg-red-100' :
                                        template.priority === 'medium' ? 'bg-orange-100 text-orange-700 hover:bg-orange-100' :
                                            'bg-green-100 text-green-700 hover:bg-green-100'
                                }>
                                    {template.priority.toUpperCase()}
                                </Badge>
                            </div>
                            <Separator />
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600">Est. Time</span>
                                <span className="text-sm text-gray-900">{template.estimatedTime}</span>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    );
}
