import Modal from '../components/common/Modal'
import Button from '../components/common/Button'
import Badge from '../components/common/Badge'
import { showToast } from '../utils/toast'
import { getSubscriptionTypeLabel } from '../utils/subscriptionTypes'

const ViewUserModal = ({ isOpen, user, onClose }) => {
    if (!user) return null

    const handleCopyLicenseCode = async () => {
        if (!user.license_code) return
        try {
            await navigator.clipboard.writeText(user.license_code)
            showToast.success('License code copied')
        } catch (error) {
            showToast.error('Failed to copy license code')
        }
    }

    const InfoGroup = ({ title, children, icon, colorClass = "bg-[#409CA4]" }) => (
        <div className="mb-10 last:mb-0">
            <div className="flex items-center gap-3 mb-5 pb-3 border-b-4 border-gray-100">
                <div className={`w-10 h-10 ${colorClass} rounded-lg flex items-center justify-center text-white shadow-lg`}>
                    <span className="text-xl">{icon}</span>
                </div>
                <h3 className="text-xl font-black text-[#111827]">
                    {title}
                </h3>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 px-2">
                {children}
            </div>
        </div>
    )

    const InfoItem = ({ label, value }) => (
        <div className="space-y-1">
            <p className="text-sm text-gray-400 font-black uppercase tracking-widest">{label}</p>
            <p className="text-lg text-[#111827] font-bold break-words">{value || '-'}</p>
        </div>
    )

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="User Profile"
            size="3xl"
        >
            <div className="max-h-[75vh] overflow-y-auto px-2 custom-scrollbar space-y-4">
                {/* ── HEADER CARD ── */}
                <div className="bg-gray-50 rounded-3xl p-8 mb-10 flex flex-col md:flex-row justify-between items-center gap-8 border-2 border-dashed border-[#409CA4]/20">
                    <div className="flex flex-col md:flex-row items-center gap-6">
                        <div className="w-24 h-24 rounded-2xl bg-gradient-to-br from-[#409CA4] to-[#2A7E85] flex items-center justify-center text-4xl font-black text-white shadow-2xl ring-8 ring-white">
                            {user.first_name?.[0]}{user.last_name?.[0]}
                        </div>
                        <div className="text-center md:text-left space-y-1">
                            <h2 className="text-3xl font-black text-[#111827] tracking-tight">{user.first_name} {user.last_name}</h2>
                            <p className="text-xl text-[#409CA4] font-bold">{user.email}</p>
                            <div className="flex flex-wrap justify-center md:justify-start gap-3 mt-4">
                                <Badge size="xl" variant={user.status === '1' || user.status === 'active' ? 'success' : 'warning'}>
                                    {user.status === '1' || user.status === 'active' ? 'ACTIVE' : user.status === 'deleted' ? 'DELETED' : 'INACTIVE'}
                                </Badge>
                             {/*   <Badge size="xl" variant="info">
                                    {user.role === 1 ? 'ADMINISTRATOR' : 'STANDARD USER'}
                                </Badge>*/}
                            </div>
                        </div>
                    </div>
                </div>

                <div className="px-2">
                    <InfoGroup title="Personal Identification" icon="👤">
                        <InfoItem label="Full Legal First Name" value={user.first_name} />
                        <InfoItem label="Full Legal Last Name" value={user.last_name} />
                        <InfoItem label="Middle Initial / Name" value={user.middle_name} />
                        <InfoItem label="Date of Birth" value={user.dob} />
                        <InfoItem label="Gender Identity" value={user.gender} />
                        <InfoItem label="Primary Contact Phone" value={user.phone} />
                        <InfoItem label="Residence Country" value={user.country} />
                        <InfoItem label="Personal URL" value={user.website} />
                    </InfoGroup>

                    <InfoGroup title="Identity Discrepancies" icon="📝" colorClass="bg-[#e8713a]">
                        <InfoItem label="Current System First Name" value={user.curnt_first_name} />
                        <InfoItem label="Current System Middle Name" value={user.curnt_middle_name} />
                        <InfoItem label="Current System Last Name" value={user.curnt_last_name} />
                    </InfoGroup>

                    <InfoGroup title="Licensing & Authentication" icon="💳" colorClass="bg-[#409CA4]">
                        <div className="space-y-1 md:col-span-2">
                            <p className="text-sm text-gray-400 font-black uppercase tracking-widest">System License Code</p>
                            <div className="flex items-center gap-3">
                                <p className="text-lg text-[#111827] font-bold break-words">{user.license_code || '-'}</p>
                                {user.license_code && (
                                    <button
                                        onClick={handleCopyLicenseCode}
                                        className="px-3 py-1.5 rounded-lg border border-gray-200 text-sm font-black text-[#409CA4] hover:bg-[#409CA4]/10"
                                    >
                                        Copy
                                    </button>
                                )}
                            </div>
                        </div>
                        <InfoItem label="Current License Status" value={user.license_code_status === 1 ? 'ACTIVE / PAID' : 'INACTIVE / FREE'} />
                        <InfoItem label="Subscription Type" value={getSubscriptionTypeLabel(user.subscription_type)} />
                        <InfoItem label="Expiration Date" value={user.license_date} />
                    </InfoGroup>

                    <InfoGroup title="Administrative Metadata" icon="⚙️" colorClass="bg-[#5cb85c]">
                        <InfoItem label="Unique User ID" value={user.user_id} />
                        <InfoItem label="Account Creation" value={user.date_created ? new Date(user.date_created).toLocaleString() : '-'} />
                        <InfoItem label="Last Login Activity" value={user.last_login_at ? new Date(user.last_login_at).toLocaleString() : 'Never Recorded'} />
                        <InfoItem label="Communication Preference" value={user.promotional_emails ? 'SUBSCRIBED TO OFFERS' : 'OPTED OUT'} />
                    </InfoGroup>

                    {user.notes && (
                        <div className="mb-10">
                            <div className="flex items-center gap-3 mb-5 pb-3 border-b-4 border-gray-100">
                                <div className="w-10 h-10 bg-[#f0ad4e] rounded-lg flex items-center justify-center text-white shadow-lg">
                                    <span className="text-xl">📓</span>
                                </div>
                                <h3 className="text-xl font-black text-[#111827]">Internal Admin Notes</h3>
                            </div>
                            <div className="p-6 bg-yellow-50 border-2 border-dashed border-[#f0ad4e]/30 rounded-3xl">
                                <p className="text-lg text-[#111827] font-medium whitespace-pre-wrap leading-relaxed">{user.notes}</p>
                            </div>
                        </div>
                    )}
                </div>
            </div>

            <div className="flex justify-end pt-6 border-t-4 border-gray-100 mt-6 pb-2">
                <Button onClick={onClose} variant="secondary" size="lg" className="px-12">Close Explorer</Button>
            </div>
        </Modal>
    )
}

export default ViewUserModal
