import { parseServerDate } from '@/lib/date';
import { cn } from '@/lib/utils';
import { format } from 'date-fns';
import { AtSign, Briefcase, Building2, Globe, Phone } from 'lucide-react';
import { statusConfig, type AdminUserDetail } from './types';

export default function OverviewTab({ user }: { user: AdminUserDetail }) {
    const statusCfg = statusConfig(user.status);

    return (
        <>
            {/* Stat strip */}
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
                <div className="pf-glass rounded-xl p-4">
                    <p className="text-muted-foreground dark:text-muted-foreground/65 mb-1.5 text-[10px] font-bold tracking-widest uppercase">
                        Status
                    </p>
                    <span
                        className={cn(
                            'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold',
                            statusCfg.cls,
                        )}
                    >
                        {statusCfg.label}
                    </span>
                </div>
                <div className="pf-glass rounded-xl p-4">
                    <p className="text-muted-foreground dark:text-muted-foreground/65 mb-1.5 text-[10px] font-bold tracking-widest uppercase">
                        Role
                    </p>
                    <span className="text-foreground font-mono text-sm font-semibold">
                        {user.role ?? '—'}
                    </span>
                </div>
                <div className="pf-glass col-span-2 rounded-xl p-4 sm:col-span-1">
                    <p className="text-muted-foreground dark:text-muted-foreground/65 mb-1.5 text-[10px] font-bold tracking-widest uppercase">
                        Member since
                    </p>
                    <span className="text-foreground text-sm font-medium">
                        {format(parseServerDate(user.created_at), 'MMM yyyy')}
                    </span>
                </div>
            </div>

            {/* Detail cards */}
            <div className="grid gap-6 sm:grid-cols-2">
                <div className="pf-glass rounded-xl p-5">
                    <p className="text-muted-foreground dark:text-muted-foreground/65 mb-4 text-[10px] font-bold tracking-widest uppercase">
                        Contact
                    </p>
                    <div className="space-y-3">
                        <div className="flex items-center gap-3">
                            <AtSign className="text-muted-foreground dark:text-muted-foreground/65 h-4 w-4 shrink-0" />
                            <span className="text-foreground min-w-0 truncate text-sm">
                                {user.email}
                            </span>
                        </div>
                        {user.phone && (
                            <div className="flex items-center gap-3">
                                <Phone className="text-muted-foreground dark:text-muted-foreground/65 h-4 w-4 shrink-0" />
                                <span className="text-foreground text-sm">
                                    {user.phone}
                                </span>
                            </div>
                        )}
                        <div className="flex items-center gap-3">
                            <Globe className="text-muted-foreground dark:text-muted-foreground/65 h-4 w-4 shrink-0" />
                            <span className="text-foreground font-mono text-sm">
                                {user.timezone}
                            </span>
                        </div>
                    </div>
                </div>

                <div className="pf-glass rounded-xl p-5">
                    <p className="text-muted-foreground dark:text-muted-foreground/65 mb-4 text-[10px] font-bold tracking-widest uppercase">
                        Organisation
                    </p>
                    {user.job_title || user.department ? (
                        <div className="space-y-3">
                            {user.job_title && (
                                <div className="flex items-center gap-3">
                                    <Briefcase className="text-muted-foreground dark:text-muted-foreground/65 h-4 w-4 shrink-0" />
                                    <span className="text-foreground text-sm">
                                        {user.job_title}
                                    </span>
                                </div>
                            )}
                            {user.department && (
                                <div className="flex items-center gap-3">
                                    <Building2 className="text-muted-foreground dark:text-muted-foreground/65 h-4 w-4 shrink-0" />
                                    <span className="text-foreground text-sm">
                                        {user.department}
                                    </span>
                                </div>
                            )}
                        </div>
                    ) : (
                        <p className="text-muted-foreground dark:text-muted-foreground/60 text-sm italic">
                            No organisation details set.
                        </p>
                    )}
                </div>
            </div>
        </>
    );
}