import React, { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { FileText, Calendar, Clock, MapPin, User, Edit2, Lock, Flag } from "lucide-react";
import { supabase } from '@/integrations/supabase/client';
import { useToast } from '@/hooks/use-toast';
import { useAuth } from '@/contexts/AuthContext';

export default function CollectionDetailsDialog({ open, onOpenChange, collection }) {
  const { toast } = useToast();
  const { user } = useAuth();

  if (!collection) return null;

  const formatCurrency = (amount) => {
    if (!amount) return '-';
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'Resolved': return 'bg-green-100 text-green-800 border-green-200';
      case 'open': return 'bg-yellow-100 text-yellow-800 border-yellow-200';
      case 'With Attorney': return 'bg-purple-100 text-purple-800 border-purple-200';
      default: return 'bg-slate-100 text-slate-800 border-slate-200';
    }
  };

  const formatDate = (dateStr) => {
    if (!dateStr) return 'N/A';
    return new Date(dateStr).toLocaleDateString('en-US', { timeZone: 'America/New_York' });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <div className="flex justify-between items-start pr-4">
            <div>
              <DialogTitle className="text-2xl font-bold text-slate-900">Collection Details</DialogTitle>
              <DialogDescription>
                Review the complete information for this collection record.
              </DialogDescription>
            </div>
            <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold capitalize shadow-sm border ${getStatusColor(collection.status)}`}>
              {collection.status || 'Pending'}
            </span>
          </div>
        </DialogHeader>

        <div className="grid gap-6 py-2">
          <div className="flex items-center justify-between p-5 bg-white shadow-sm rounded-lg border border-slate-200">
            <div className="space-y-1">
              <p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Owner</p>
              <p className="font-bold text-lg text-slate-900">{collection.owners?.first_name} {collection.owners?.last_name}</p>
            </div>
            <div className="text-right space-y-1">
              <p className="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Outstanding</p>
              <p className="text-3xl font-bold text-emerald-600">{formatCurrency(collection.amount_owed)}</p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-5">
              <div className="flex items-start space-x-3">
                <div className="p-2 bg-blue-50 rounded-lg">
                  <User className="w-5 h-5 text-blue-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-500">Association</p>
                  <p className="text-slate-900 font-semibold">{collection.associations?.name || 'N/A'}</p>
                </div>
              </div>
            </div>

            <div className="space-y-5">
              <div className="flex items-start space-x-3">
                <div className="p-2 bg-red-50 rounded-lg">
                  <Clock className="w-5 h-5 text-red-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-500">Last Notice Date</p>
                  <p className="text-slate-900 font-semibold">{formatDate(collection.last_notice_date)}</p>
                </div>
              </div>

              <div className="flex items-start space-x-3">
                <div className="p-2 bg-slate-100 rounded-lg">
                  <Calendar className="w-5 h-5 text-slate-600" />
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-500">Date Created</p>
                  <p className="text-slate-900 font-medium">{formatDate(collection.created_at)}</p>
                </div>
              </div>
            </div>
          </div>

          {collection.notes && (
            <div className="space-y-2">
              <p className="text-sm font-bold text-slate-700">Notes & History</p>
              <div className="p-4 bg-yellow-50/50 rounded-lg border border-yellow-100 text-slate-700 text-sm leading-relaxed">
                {collection.notes}
              </div>
            </div>
          )}
        </div>

        <DialogFooter className="sm:justify-between items-center border-t pt-4">
          <div className="text-xs text-slate-400 flex items-center mt-4 sm:mt-0">
            Last updated: {formatDate(collection.updated_at)}
          </div>
          <Button 
            size="lg" 
            onClick={() => onOpenChange(false)}
            className="w-full sm:w-auto bg-slate-900 hover:bg-slate-800"
          >
            Close Details
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}