'use client';

/**
 * EN: Account Mockup Component
 * VI: Component Mockup Tài khoản
 *
 * This is a visual mockup/demo component for the client account page.
 * It showcases the account overview, profile information, statistics, and quick actions.
 *
 * Đây là component mockup/demo cho trang tài khoản client.
 * Nó minh họa tổng quan tài khoản, thông tin profile, thống kê, và các hành động nhanh.
 */

import Link from 'next/link';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/features/shared/components/ui/card';
import { Button } from '@/features/shared/components/ui/button';
import {
  Avatar,
  AvatarImage,
  AvatarFallback,
} from '@/features/shared/components/ui/avatar';
import {
  User,
  Mail,
  Calendar,
  Shield,
  Activity,
  TrendingUp,
  MessageSquare,
  Settings,
  CreditCard,
  Bell,
  CheckCircle2,
  Clock,
  BarChart3,
  Zap,
} from 'lucide-react';
import { useTranslations } from 'next-intl';
import { cn } from '@/shared/lib/utils';

/**
 * EN: Account Statistics Card
 * VI: Card Thống kê Tài khoản
 */
function AccountStatsCard() {
  const t = useTranslations();

  const stats = [
    {
      label: t('account.stats.totalChats', { defaultValue: 'Total Chats' }),
      value: '1,234',
      change: '+12%',
      trend: 'up',
      icon: MessageSquare,
      color: 'text-accent-primary',
    },
    {
      label: t('account.stats.activeSessions', { defaultValue: 'Active Sessions' }),
      value: '5',
      change: '+2',
      trend: 'up',
      icon: Activity,
      color: 'text-accent-success',
    },
    {
      label: t('account.stats.apiCalls', { defaultValue: 'API Calls (This Month)' }),
      value: '45.2K',
      change: '+8%',
      trend: 'up',
      icon: TrendingUp,
      color: 'text-accent-info',
    },
    {
      label: t('account.stats.uptime', { defaultValue: 'Uptime' }),
      value: '99.9%',
      change: 'Stable',
      trend: 'stable',
      icon: BarChart3,
      color: 'text-accent-success',
    },
  ];

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {stats.map((stat, index) => {
        const Icon = stat.icon;
        return (
          <Card key={index} hover bordered>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div className="flex-1">
                  <p className="text-sm font-medium text-text-secondary">
                    {stat.label}
                  </p>
                  <p className="mt-2 text-2xl font-bold text-text-primary">
                    {stat.value}
                  </p>
                  <div className="mt-2 flex items-center gap-1">
                    {stat.trend === 'up' && (
                      <span className="text-xs font-medium text-accent-success">
                        {stat.change}
                      </span>
                    )}
                    {stat.trend === 'stable' && (
                      <span className="text-xs font-medium text-text-tertiary">
                        {stat.change}
                      </span>
                    )}
                    <span className="text-xs text-text-tertiary">
                      {t('account.stats.vsLastMonth', { defaultValue: 'vs last month' })}
                    </span>
                  </div>
                </div>
                <div className={`rounded-lg bg-bg-tertiary p-3 ${stat.color}`}>
                  <Icon className="h-6 w-6" />
                </div>
              </div>
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}

/**
 * EN: Quick Actions Card
 * VI: Card Hành động Nhanh
 */
function QuickActionsCard() {
  const t = useTranslations();

  const actions = [
    {
      label: t('account.actions.updateProfile', { defaultValue: 'Update Profile' }),
      icon: User,
      href: '/settings/profile',
      color: 'text-accent-primary',
    },
    {
      label: t('account.actions.manageApiKeys', { defaultValue: 'Manage API Keys' }),
      icon: Shield,
      href: '/settings/api-keys',
      color: 'text-accent-warning',
    },
    {
      label: t('account.actions.billing', { defaultValue: 'Billing & Subscription' }),
      icon: CreditCard,
      href: '/settings/billing',
      color: 'text-accent-info',
    },
    {
      label: t('account.actions.notifications', { defaultValue: 'Notification Settings' }),
      icon: Bell,
      href: '/settings/notifications',
      color: 'text-accent-secondary',
    },
  ];

  return (
    <Card hover>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Zap className="h-5 w-5 text-accent-primary" />
          {t('account.quickActions', { defaultValue: 'Quick Actions' })}
        </CardTitle>
        <CardDescription>
          {t('account.quickActionsDescription', {
            defaultValue: 'Common account management tasks',
          })}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {actions.map((action, index) => {
            const Icon = action.icon;
            return (
              <Link
                key={index}
                href={action.href}
                className={cn(
                  'inline-flex items-center justify-start gap-3 rounded-md font-medium transition-all duration-[150ms] ease-out h-auto py-3 px-4',
                  'bg-chat-ai-bubble text-chat-ai-text hover:bg-bg-tertiary hover:scale-[1.02] active:scale-[0.98]',
                  'border border-border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent-primary'
                )}
              >
                <Icon className={`h-5 w-5 ${action.color}`} />
                <span>{action.label}</span>
              </Link>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}

/**
 * EN: Account Information Card
 * VI: Card Thông tin Tài khoản
 */
function AccountInfoCard() {
  const t = useTranslations();

  // EN: Mock user data / VI: Dữ liệu user mẫu
  const userData = {
    name: 'John Doe',
    email: 'john.doe@example.com',
    username: 'johndoe',
    memberSince: 'January 2024',
    emailVerified: true,
    phoneVerified: false,
    plan: 'Pro',
    avatarUrl: null,
  };

  const infoItems = [
    {
      label: t('account.info.email', { defaultValue: 'Email' }),
      value: userData.email,
      verified: userData.emailVerified,
      icon: Mail,
    },
    {
      label: t('account.info.username', { defaultValue: 'Username' }),
      value: userData.username,
      verified: false,
      icon: User,
    },
    {
      label: t('account.info.memberSince', { defaultValue: 'Member Since' }),
      value: userData.memberSince,
      verified: false,
      icon: Calendar,
    },
    {
      label: t('account.info.plan', { defaultValue: 'Plan' }),
      value: userData.plan,
      verified: false,
      icon: Shield,
    },
  ];

  return (
    <Card hover>
      <CardHeader>
        <CardTitle>{t('account.info.title', { defaultValue: 'Account Information' })}</CardTitle>
        <CardDescription>
          {t('account.info.description', {
            defaultValue: 'Your account details and verification status',
          })}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {/* EN: Avatar and Name Section / VI: Phần Avatar và Tên */}
        <div className="mb-6 flex items-center gap-4 border-b border-border-primary pb-6">
          <Avatar size="xl" className="h-20 w-20">
            {userData.avatarUrl && (
              <AvatarImage src={userData.avatarUrl} alt={userData.name} />
            )}
            <AvatarFallback>
              {userData.name
                .split(' ')
                .map((n) => n[0])
                .join('')
                .toUpperCase()}
            </AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <h3 className="text-xl font-semibold text-text-primary">{userData.name}</h3>
            <p className="text-sm text-text-secondary">{userData.email}</p>
            <div className="mt-2 flex items-center gap-2">
              {userData.emailVerified && (
                <span className="inline-flex items-center gap-1 rounded-full bg-accent-success/10 px-2 py-1 text-xs font-medium text-accent-success">
                  <CheckCircle2 className="h-3 w-3" />
                  {t('account.verified', { defaultValue: 'Verified' })}
                </span>
              )}
              <span className="inline-flex items-center gap-1 rounded-full bg-accent-primary/10 px-2 py-1 text-xs font-medium text-accent-primary">
                {userData.plan}
              </span>
            </div>
          </div>
          <Link
            href="/settings/profile"
            className={cn(
              'inline-flex items-center justify-center rounded-md font-medium transition-all duration-[150ms] ease-out',
              'bg-chat-ai-bubble text-chat-ai-text hover:bg-bg-tertiary hover:scale-[1.02] active:scale-[0.98]',
              'border border-border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent-primary',
              'h-10 px-4 text-base'
            )}
          >
            {t('account.editProfile', { defaultValue: 'Edit Profile' })}
          </Link>
        </div>

        {/* EN: Information Grid / VI: Lưới Thông tin */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {infoItems.map((item, index) => {
            const Icon = item.icon;
            return (
              <div
                key={index}
                className="flex items-start gap-3 rounded-lg bg-bg-tertiary p-4"
              >
                <div className="rounded-lg bg-bg-elevated p-2 text-text-tertiary">
                  <Icon className="h-5 w-5" />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-text-secondary">{item.label}</p>
                  <p className="mt-1 text-base text-text-primary">{item.value}</p>
                  {item.verified && (
                    <div className="mt-1 flex items-center gap-1 text-xs text-accent-success">
                      <CheckCircle2 className="h-3 w-3" />
                      <span>{t('account.verified', { defaultValue: 'Verified' })}</span>
                    </div>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}

/**
 * EN: Recent Activity Card
 * VI: Card Hoạt động Gần đây
 */
function RecentActivityCard() {
  const t = useTranslations();

  // EN: Mock activity data / VI: Dữ liệu hoạt động mẫu
  const activities = [
    {
      type: 'api_key_created',
      message: t('account.activity.apiKeyCreated', {
        defaultValue: 'Created new API key',
      }),
      time: '2 hours ago',
      icon: Shield,
      color: 'text-accent-success',
    },
    {
      type: 'profile_updated',
      message: t('account.activity.profileUpdated', {
        defaultValue: 'Updated profile information',
      }),
      time: '1 day ago',
      icon: User,
      color: 'text-accent-primary',
    },
    {
      type: 'chat_created',
      message: t('account.activity.chatCreated', {
        defaultValue: 'Started new conversation',
      }),
      time: '2 days ago',
      icon: MessageSquare,
      color: 'text-accent-info',
    },
    {
      type: 'settings_changed',
      message: t('account.activity.settingsChanged', {
        defaultValue: 'Changed notification preferences',
      }),
      time: '3 days ago',
      icon: Settings,
      color: 'text-accent-warning',
    },
  ];

  return (
    <Card hover>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Activity className="h-5 w-5 text-accent-primary" />
          {t('account.recentActivity', { defaultValue: 'Recent Activity' })}
        </CardTitle>
        <CardDescription>
          {t('account.recentActivityDescription', {
            defaultValue: 'Your recent account activities and changes',
          })}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {activities.map((activity, index) => {
            const Icon = activity.icon;
            return (
              <div
                key={index}
                className="flex items-start gap-4 rounded-lg border border-border-primary bg-bg-tertiary p-4 transition-all hover:border-border-secondary"
              >
                <div className={`rounded-lg bg-bg-elevated p-2 ${activity.color}`}>
                  <Icon className="h-5 w-5" />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-text-primary">
                    {activity.message}
                  </p>
                  <div className="mt-1 flex items-center gap-2 text-xs text-text-tertiary">
                    <Clock className="h-3 w-3" />
                    <span>{activity.time}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="mt-4">
          <Button variant="ghost" size="sm" className="w-full">
            {t('account.viewAllActivity', { defaultValue: 'View All Activity' })}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

/**
 * EN: Account Security Status Card
 * VI: Card Trạng thái Bảo mật Tài khoản
 */
function SecurityStatusCard() {
  const t = useTranslations();

  const securityItems = [
    {
      label: t('account.security.emailVerified', { defaultValue: 'Email Verified' }),
      status: true,
      icon: CheckCircle2,
    },
    {
      label: t('account.security.twoFactorEnabled', { defaultValue: 'Two-Factor Authentication' }),
      status: false,
      icon: Shield,
    },
    {
      label: t('account.security.phoneVerified', { defaultValue: 'Phone Verified' }),
      status: false,
      icon: CheckCircle2,
    },
    {
      label: t('account.security.recoveryCodes', {
        defaultValue: 'Recovery Codes Generated',
      }),
      status: true,
      icon: Shield,
    },
  ];

  const completedCount = securityItems.filter((item) => item.status).length;
  const totalCount = securityItems.length;
  const percentage = (completedCount / totalCount) * 100;

  return (
    <Card hover>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Shield className="h-5 w-5 text-accent-primary" />
          {t('account.security.title', { defaultValue: 'Security Status' })}
        </CardTitle>
        <CardDescription>
          {t('account.security.description', {
            defaultValue: 'Your account security settings and recommendations',
          })}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {/* EN: Security Score / VI: Điểm Bảo mật */}
        <div className="mb-6">
          <div className="mb-2 flex items-center justify-between">
            <span className="text-sm font-medium text-text-secondary">
              {t('account.security.score', { defaultValue: 'Security Score' })}
            </span>
            <span className="text-sm font-bold text-text-primary">
              {completedCount}/{totalCount}
            </span>
          </div>
          <div className="h-2 w-full overflow-hidden rounded-full bg-bg-tertiary">
            <div
              className="h-full rounded-full bg-accent-primary transition-all duration-500"
              style={{ width: `${percentage}%` }}
            />
          </div>
          <p className="mt-2 text-xs text-text-tertiary">
            {percentage === 100
              ? t('account.security.excellent', {
                  defaultValue: 'Excellent! Your account is well secured.',
                })
              : t('account.security.improve', {
                  defaultValue: 'Complete remaining items to improve security.',
                })}
          </p>
        </div>

        {/* EN: Security Items List / VI: Danh sách Mục Bảo mật */}
        <div className="space-y-3">
          {securityItems.map((item, index) => {
            const Icon = item.icon;
            return (
              <div
                key={index}
                className="flex items-center justify-between rounded-lg border border-border-primary bg-bg-tertiary p-3"
              >
                <div className="flex items-center gap-3">
                  <Icon
                    className={`h-5 w-5 ${
                      item.status ? 'text-accent-success' : 'text-text-tertiary'
                    }`}
                  />
                  <span className="text-sm font-medium text-text-primary">
                    {item.label}
                  </span>
                </div>
                {item.status ? (
                  <span className="inline-flex items-center gap-1 rounded-full bg-accent-success/10 px-2 py-1 text-xs font-medium text-accent-success">
                    <CheckCircle2 className="h-3 w-3" />
                    {t('account.security.enabled', { defaultValue: 'Enabled' })}
                  </span>
                ) : (
                  <Link
                    href="/settings/security"
                    className={cn(
                      'inline-flex items-center justify-center rounded-md font-medium transition-all duration-[150ms] ease-out',
                      'text-text-secondary hover:bg-bg-tertiary hover:text-text-primary active:bg-bg-elevated',
                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent-primary',
                      'h-8 px-3 text-sm'
                    )}
                  >
                    {t('account.security.enable', { defaultValue: 'Enable' })}
                  </Link>
                )}
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}

/**
 * EN: Main Account Mockup Page
 * VI: Trang Mockup Tài khoản Chính
 */
export default function AccountMockupPage() {
  const t = useTranslations();

  return (
    <div className="min-h-screen bg-bg-primary">
      {/* EN: Page Header / VI: Header Trang */}
      <div className="border-b border-border-primary bg-bg-secondary">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="py-8">
            <h1 className="text-3xl font-bold text-text-primary">
              {t('account.title', { defaultValue: 'My Account' })}
            </h1>
            <p className="mt-2 text-sm text-text-tertiary">
              {t('account.description', {
                defaultValue: 'Manage your account settings, view statistics, and monitor activity',
              })}
            </p>
          </div>
        </div>
      </div>

      {/* EN: Main Content / VI: Nội dung Chính */}
      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div className="space-y-8">
          {/* EN: Statistics Cards / VI: Cards Thống kê */}
          <AccountStatsCard />

          {/* EN: Main Grid Layout / VI: Bố cục Lưới Chính */}
          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
            {/* EN: Left Column - Account Info / VI: Cột Trái - Thông tin Tài khoản */}
            <div className="lg:col-span-2 space-y-8">
              <AccountInfoCard />
              <RecentActivityCard />
            </div>

            {/* EN: Right Column - Quick Actions & Security / VI: Cột Phải - Hành động Nhanh & Bảo mật */}
            <div className="space-y-8">
              <QuickActionsCard />
              <SecurityStatusCard />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
