'use client';

import { useRouter } from 'next/navigation';
import { Mail, Phone, Globe, ExternalLink, Pencil } from 'lucide-react';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from '@/components/ui/sheet';
import { Button } from '@/components/ui/button';
import { Spinner } from '@/components/ui/spinners';
import type { UserModel } from '@/utils/types/User';
import {
  accountTypeMeta,
  avatarTint,
  formatDateTime,
  fullName,
  getInitials,
  statusMeta,
} from './userListUtils';

function Pill({ label, className }: { label: string; className: string }) {
  return (
    <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${className}`}>
      {label}
    </span>
  );
}

function Stat({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div className="rounded-lg border p-3">
      <div className="text-xs text-muted-foreground">{label}</div>
      <div className="text-lg font-semibold tabular-nums">{value}</div>
    </div>
  );
}

export function UserDetailSheet({
  user,
  open,
  onClose,
  onToggleActivation,
  toggling,
}: {
  user: UserModel | null;
  open: boolean;
  onClose: () => void;
  onToggleActivation: (user: UserModel) => void;
  toggling: boolean;
}) {
  const router = useRouter();
  if (!user) return null;

  const type = accountTypeMeta(user.account_type_id, user.account_type);
  const status = statusMeta(user.is_activated);

  return (
    <Sheet open={open} onOpenChange={(o) => !o && onClose()}>
      <SheetContent side="right" className="w-full sm:max-w-lg overflow-y-auto">
        <SheetHeader>
          <SheetTitle className="flex items-center gap-3">
            <span className={`flex size-11 items-center justify-center rounded-full text-sm font-semibold ${avatarTint(user.id)}`}>
              {getInitials(user)}
            </span>
            <div className="min-w-0">
              <div className="truncate">{fullName(user)}</div>
              <div className="text-xs font-normal text-muted-foreground truncate">#{user.id}</div>
            </div>
          </SheetTitle>
          <SheetDescription className="flex flex-wrap gap-2 pt-1">
            <Pill {...type} />
            <Pill {...status} />
            {user.is_paid_subscription ? (
              <Pill label="Paid subscriber" className="border-indigo-200 bg-indigo-50 text-indigo-700" />
            ) : null}
            {user.email_verified ? (
              <Pill label="Verified" className="border-green-200 bg-green-50 text-green-700" />
            ) : (
              <Pill label="Unverified" className="border-gray-200 bg-gray-50 text-gray-600" />
            )}
          </SheetDescription>
        </SheetHeader>

        <div className="space-y-6 px-4 pb-6">
          {/* Contact */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">Contact</h3>
            <div className="rounded-lg border divide-y text-sm">
              <div className="flex items-center gap-3 p-3">
                <Mail className="size-4 text-muted-foreground shrink-0" />
                <span className="truncate">{user.email || '—'}</span>
              </div>
              <div className="flex items-center gap-3 p-3">
                <Phone className="size-4 text-muted-foreground shrink-0" />
                <span>{user.phone || '—'}</span>
              </div>
              <div className="flex items-center gap-3 p-3">
                <Globe className="size-4 text-muted-foreground shrink-0" />
                <span>{user.country?.name || '—'}</span>
              </div>
            </div>
          </div>

          {/* Brand */}
          {user.brand_name ? (
            <div className="space-y-2">
              <h3 className="text-sm font-semibold">Brand</h3>
              <div className="rounded-lg border p-3 text-sm font-medium">{user.brand_name}</div>
            </div>
          ) : null}

          {/* Balances */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">Balances</h3>
            <div className="grid grid-cols-2 gap-3">
              <Stat label="Credit" value={user.credit ?? 0} />
              <Stat label="Reports" value={user.requests_balance ?? 0} />
              <Stat label="Search" value={user.search_balance ?? 0} />
              <Stat label="Campaign" value={user.campaign_balance ?? 0} />
            </div>
          </div>

          {/* Subscription */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">Subscription</h3>
            <div className="rounded-lg border p-3 text-sm space-y-1">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Plan</span>
                <span className="font-medium">{user.paid_subscription || (user.is_paid_subscription ? 'Paid' : 'Free')}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Start</span>
                <span>{formatDateTime(user.subscription_start_date)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">End</span>
                <span>{formatDateTime(user.subscription_end_date)}</span>
              </div>
            </div>
          </div>

          {/* Meta */}
          <div className="space-y-2">
            <h3 className="text-sm font-semibold">Account</h3>
            <div className="rounded-lg border p-3 text-sm space-y-1">
              <div className="flex justify-between">
                <span className="text-muted-foreground">Roles</span>
                <span className="font-medium">{user.roles?.map((r) => r.name).join(', ') || '—'}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Created</span>
                <span>{formatDateTime(user.created_at)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">Created by</span>
                <span>{user.created_by?.name || '—'}</span>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="flex flex-wrap gap-2 pt-2 border-t">
            <Button onClick={() => router.push(`/users/add/${user.id}`)}>
              <Pencil className="size-4 mr-1.5" /> Edit
            </Button>
            <Button variant="outline" onClick={() => router.push(`/users/${user.id}`)}>
              <ExternalLink className="size-4 mr-1.5" /> Full profile
            </Button>
            <Button
              variant={user.is_activated ? 'outline' : 'primary'}
              onClick={() => onToggleActivation(user)}
              disabled={toggling}
              className={user.is_activated ? 'text-amber-600 border-amber-200 hover:bg-amber-50' : ''}
            >
              {toggling ? <Spinner className="size-4 animate-spin mr-1.5" /> : null}
              {user.is_activated ? 'Deactivate' : 'Activate'}
            </Button>
          </div>
        </div>
      </SheetContent>
    </Sheet>
  );
}