'use client';

import { useParams, useRouter } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import {
  ArrowLeft,
  Pencil,
  Mail,
  Phone,
  Globe,
  Building2,
  CalendarDays,
  ShieldCheck,
} from 'lucide-react';
import { fetchUserById } from '@/network/apis/dashboard/userManagment/users/users.apis';
import { UserModel } from '@/utils/types/User';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Spinner } from '@/components/ui/spinners';
import {
  accountTypeMeta,
  avatarTint,
  formatDateTime,
  fullName,
  getInitials,
  statusMeta,
} from '../usersList/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 InfoRow({ icon, label, value }: { icon: React.ReactNode; label: string; value: React.ReactNode }) {
  return (
    <div className="flex items-center gap-3 py-2.5">
      <span className="text-muted-foreground shrink-0">{icon}</span>
      <span className="text-sm text-muted-foreground w-32 shrink-0">{label}</span>
      <span className="text-sm font-medium truncate">{value}</span>
    </div>
  );
}

function BalanceCard({ 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 default function UserDetails() {
  const router = useRouter();
  const params = useParams();
  const id = params?.id as string | undefined;

  const { data: user, isLoading, isError, error } = useQuery({
    queryKey: ['user_details', id],
    queryFn: async () => (id === undefined ? undefined : fetchUserById(id.toString())),
    enabled: id !== undefined,
  });

  if (isLoading) {
    return <div className="flex items-center justify-center py-24"><Spinner className="size-8 animate-spin text-primary" /></div>;
  }
  if (isError) {
    return <div className="p-6 text-sm text-red-600">Failed to load user: {(error as Error)?.message ?? 'Unknown error'}</div>;
  }
  const u = user as UserModel | undefined;
  if (!u) return <div className="p-6 text-sm text-muted-foreground">User not found.</div>;

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

  return (
    <div className="container mx-auto py-6 max-w-5xl space-y-5">
      <div className="flex items-center justify-between gap-3">
        <Button variant="ghost" size="sm" onClick={() => router.push('/users')}>
          <ArrowLeft className="size-4 mr-1.5" /> Back to users
        </Button>
        <Button onClick={() => router.push(`/users/add/${u.id}`)}>
          <Pencil className="size-4 mr-1.5" /> Edit
        </Button>
      </div>

      {/* Header */}
      <Card>
        <CardContent className="flex flex-col sm:flex-row sm:items-center gap-4 p-6">
          <span className={`flex size-16 items-center justify-center rounded-full text-xl font-semibold shrink-0 ${avatarTint(u.id)}`}>
            {getInitials(u)}
          </span>
          <div className="min-w-0 flex-1">
            <h1 className="text-2xl font-semibold truncate">{fullName(u)}</h1>
            <p className="text-sm text-muted-foreground truncate">{u.email} · #{u.id}</p>
            <div className="flex flex-wrap gap-2 mt-2">
              <Pill {...type} />
              <Pill {...status} />
              {u.is_paid_subscription ? <Pill label="Paid subscriber" className="border-indigo-200 bg-indigo-50 text-indigo-700" /> : null}
              <Pill label={u.email_verified ? 'Verified' : 'Unverified'} className={u.email_verified ? 'border-green-200 bg-green-50 text-green-700' : 'border-gray-200 bg-gray-50 text-gray-600'} />
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        {/* Profile */}
        <Card>
          <CardHeader><CardTitle className="text-base">Profile</CardTitle></CardHeader>
          <CardContent className="divide-y pt-0">
            <InfoRow icon={<Mail className="size-4" />} label="Email" value={u.email || '—'} />
            <InfoRow icon={<Phone className="size-4" />} label="Phone" value={u.phone || '—'} />
            <InfoRow icon={<Globe className="size-4" />} label="Country" value={u.country?.name || '—'} />
            <InfoRow icon={<Building2 className="size-4" />} label="Brand" value={u.brand_name || '—'} />
            <InfoRow icon={<ShieldCheck className="size-4" />} label="Roles" value={u.roles?.map((r) => r.name).join(', ') || '—'} />
            <InfoRow icon={<CalendarDays className="size-4" />} label="Created" value={formatDateTime(u.created_at)} />
            <InfoRow icon={<CalendarDays className="size-4" />} label="Created by" value={u.created_by?.name || '—'} />
          </CardContent>
        </Card>

        {/* Subscription */}
        <Card>
          <CardHeader><CardTitle className="text-base">Subscription</CardTitle></CardHeader>
          <CardContent className="divide-y pt-0">
            <InfoRow icon={<ShieldCheck className="size-4" />} label="Plan" value={u.paid_subscription || (u.is_paid_subscription ? 'Paid' : 'Free')} />
            <InfoRow icon={<CalendarDays className="size-4" />} label="Start" value={formatDateTime(u.subscription_start_date)} />
            <InfoRow icon={<CalendarDays className="size-4" />} label="End" value={formatDateTime(u.subscription_end_date)} />
            <InfoRow icon={<ShieldCheck className="size-4" />} label="Reports" value={u.reports ?? '—'} />
            <InfoRow icon={<ShieldCheck className="size-4" />} label="PPTX downloads" value={u.pptx_downloads ?? 0} />
          </CardContent>
        </Card>
      </div>

      {/* Balances */}
      <Card>
        <CardHeader><CardTitle className="text-base">Balances</CardTitle></CardHeader>
        <CardContent className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 pt-0">
          <BalanceCard label="Credit" value={u.credit ?? 0} />
          <BalanceCard label="Reports" value={u.requests_balance ?? 0} />
          <BalanceCard label="Search" value={u.search_balance ?? 0} />
          <BalanceCard label="Campaign" value={u.campaign_balance ?? 0} />
          <BalanceCard label="My Network" value={u.mynetwork_balance ?? 0} />
          <BalanceCard label="Social Listening" value={u.social_listening_balance ?? 0} />
          <BalanceCard label="Lookalike" value={u.lookalike_balance ?? 0} />
          <BalanceCard label="Competitor" value={u.competitor_analysis_balance ?? 0} />
          <BalanceCard label="Phone Number" value={u.phone_number_balance ?? 0} />
          <BalanceCard label="Media Plan" value={u.media_plan_balance ?? 0} />
          <BalanceCard label="WhatsApp Msg" value={u.whatsapp_message_balance ?? 0} />
          <BalanceCard label="Collaboration" value={u.collaboration_request_balance ?? 0} />
        </CardContent>
      </Card>
    </div>
  );
}