'use client';

import React from 'react';
import {
  X,
  Building,
  Users,
  ShieldCheck,
  Coins,
  KeyRound,
  FileText,
  Phone,
  Mail,
  MapPin,
  CheckCircle2,
} from 'lucide-react';

interface OrganizationProfileDrawerProps {
  user: any;
  onClose: () => void;
}

export default function OrganizationProfileDrawer({
  user,
  onClose,
}: OrganizationProfileDrawerProps) {
  if (!user) return null;

  const orgStats = user.orgStats || {
    totalMembers: user.teamMembers?.length || 0,
    totalVerifications: 0,
    totalApiRequests: 0,
    unitsPurchased: user.wallet?.totalUnitsPurchased || 0,
    unitsUsed: user.wallet?.totalUnitsUsed || 0,
    unitsRemaining: user.wallet?.unitsBalance || 0,
  };

  return (
    <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-2xl border border-slate-200 max-w-3xl w-full p-6 sm:p-7 space-y-6 animate-in fade-in zoom-in-95 duration-150 max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between border-b border-slate-100 pb-4">
          <div>
            <span className="text-[10.5px] font-mono font-bold text-emerald-700 uppercase tracking-wider block">
              ORGANIZATION PROFILE & AGGREGATE METRICS
            </span>
            <h3 className="text-lg font-bold text-slate-900 mt-0.5">
              {user.orgName || user.company || user.name} ({user.userCode})
            </h3>
          </div>
          <button
            onClick={onClose}
            className="text-slate-400 hover:text-slate-600 p-1.5 rounded-lg hover:bg-slate-100"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {/* Company Identity Details */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4 rounded-xl bg-slate-50 border border-slate-200/80 text-xs">
          <div>
            <span className="text-slate-500 font-mono block">Company Name</span>
            <span className="text-slate-900 font-bold text-sm">{user.orgName || user.company || user.name}</span>
          </div>
          <div>
            <span className="text-slate-500 font-mono block">Organization User ID</span>
            <span className="text-[#00875a] font-mono font-bold text-sm">{user.userCode}</span>
          </div>
          <div>
            <span className="text-slate-500 font-mono block">Company Email</span>
            <span className="text-slate-800 font-mono">{user.orgEmail || user.email}</span>
          </div>
          <div>
            <span className="text-slate-500 font-mono block">Company Phone</span>
            <span className="text-slate-800 font-mono">{user.orgPhone || user.phone || 'N/A'}</span>
          </div>
          <div>
            <span className="text-slate-500 font-mono block">CAC / RC Number</span>
            <span className="text-slate-900 font-mono font-bold">{user.orgRcNumber || 'N/A'}</span>
          </div>
          <div>
            <span className="text-slate-500 font-mono block">Account Status</span>
            <span
              className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-bold ${
                user.status === 'ACTIVE'
                  ? 'bg-emerald-100 text-emerald-800'
                  : 'bg-rose-100 text-rose-800'
              }`}
            >
              {user.status}
            </span>
          </div>
          <div className="sm:col-span-2">
            <span className="text-slate-500 font-mono block">Company Registered Address</span>
            <span className="text-slate-700">{user.orgAddress || user.address || 'N/A'}</span>
          </div>
        </div>

        {/* Organization Aggregate Statistics */}
        <div className="space-y-2">
          <h4 className="text-xs font-mono font-bold text-slate-700 uppercase tracking-wider flex items-center gap-1.5">
            <Building className="w-4 h-4 text-[#00875a]" />
            <span>Organization Statistics & Combined Usage</span>
          </h4>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-center">
            <div className="p-3.5 bg-slate-50 rounded-xl border border-slate-200">
              <span className="text-[10px] text-slate-500 font-semibold uppercase">Total Members</span>
              <div className="text-xl font-bold text-slate-900 font-mono mt-0.5">
                {orgStats.totalMembers}
              </div>
            </div>
            <div className="p-3.5 bg-amber-50/60 rounded-xl border border-amber-200">
              <span className="text-[10px] text-amber-800 font-bold uppercase">Units Remaining</span>
              <div className="text-xl font-extrabold text-amber-900 font-mono mt-0.5">
                {Number(orgStats.unitsRemaining).toLocaleString()}
              </div>
            </div>
            <div className="p-3.5 bg-slate-50 rounded-xl border border-slate-200">
              <span className="text-[10px] text-slate-500 font-semibold uppercase">Verifications</span>
              <div className="text-xl font-bold text-[#00875a] font-mono mt-0.5">
                {orgStats.totalVerifications}
              </div>
            </div>
            <div className="p-3.5 bg-slate-50 rounded-xl border border-slate-200">
              <span className="text-[10px] text-slate-500 font-semibold uppercase">API Requests</span>
              <div className="text-xl font-bold text-teal-700 font-mono mt-0.5">
                {orgStats.totalApiRequests}
              </div>
            </div>
          </div>
        </div>

        {/* Team Members List */}
        <div className="space-y-2">
          <h4 className="text-xs font-mono font-bold text-slate-700 uppercase tracking-wider flex items-center gap-1.5">
            <Users className="w-4 h-4 text-slate-600" />
            <span>Authorized Organization Members ({user.teamMembers?.length || 0})</span>
          </h4>
          <div className="bg-slate-50 rounded-xl border border-slate-200 p-3 max-h-48 overflow-y-auto space-y-2 text-xs">
            {(user.teamMembers || []).length === 0 ? (
              <div className="text-slate-400 text-center py-3">No additional team members assigned.</div>
            ) : (
              user.teamMembers.map((m: any) => (
                <div key={m.id} className="flex justify-between items-center p-2 bg-white rounded-lg border border-slate-100">
                  <div>
                    <div className="font-bold text-slate-900">{m.name}</div>
                    <div className="text-[11px] text-slate-500 font-mono">{m.email} | {m.userCode}</div>
                  </div>
                  <span className="px-2 py-0.5 bg-emerald-50 text-emerald-800 text-[10px] font-bold rounded-full">
                    {m.status}
                  </span>
                </div>
              ))
            )}
          </div>
        </div>

        <div className="flex justify-end pt-2 border-t border-slate-100">
          <button
            onClick={onClose}
            className="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white font-bold text-xs rounded-xl transition-all"
          >
            Close Profile
          </button>
        </div>
      </div>
    </div>
  );
}