'use client';

import { Check, Crown, Rocket, Shield, X, Zap } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Link } from '@/i18n/navigation';
import { formatVND } from '@/lib/currency';
import { usePlans } from '@/lib/hooks/use-subscription';
import type { PlanDto } from '@/lib/subscription-api';
import { cn } from '@/lib/utils';

// ---------------------------------------------------------------------------
// Constants
// ---------------------------------------------------------------------------

const PLAN_TIER_ORDER = ['FREE', 'AGENT_PRO', 'INVESTOR', 'ENTERPRISE'];

const TIER_ICONS: Record<string, React.ReactNode> = {
  FREE: <Zap className="h-6 w-6" />,
  AGENT_PRO: <Rocket className="h-6 w-6" />,
  INVESTOR: <Shield className="h-6 w-6" />,
  ENTERPRISE: <Crown className="h-6 w-6" />,
};

const TIER_COLORS: Record<string, string> = {
  FREE: 'text-muted-foreground',
  AGENT_PRO: 'text-blue-600',
  INVESTOR: 'text-purple-600',
  ENTERPRISE: 'text-amber-600',
};

/** Fallback data when API is unavailable */
const FALLBACK_PLANS: PlanDto[] = [
  {
    id: 'fallback-free',
    tier: 'FREE',
    name: 'Miễn phí',
    priceMonthlyVND: '0',
    priceYearlyVND: '0',
    maxListings: 3,
    maxSavedSearches: 5,
    features: {
      basicSearch: true,
      listingPost: true,
      maxPhotos: 5,
      analytics: false,
      prioritySupport: false,
      aiValuation: false,
      featuredListing: false,
    },
    isActive: true,
  },
  {
    id: 'fallback-agent',
    tier: 'AGENT_PRO',
    name: 'Agent Pro',
    priceMonthlyVND: '499000',
    priceYearlyVND: '4990000',
    maxListings: 50,
    maxSavedSearches: 30,
    features: {
      basicSearch: true,
      listingPost: true,
      maxPhotos: 30,
      analytics: true,
      prioritySupport: true,
      aiValuation: true,
      featuredListing: true,
      leadManagement: true,
      agentProfile: true,
    },
    isActive: true,
  },
  {
    id: 'fallback-investor',
    tier: 'INVESTOR',
    name: 'Investor',
    priceMonthlyVND: '999000',
    priceYearlyVND: '9990000',
    maxListings: 20,
    maxSavedSearches: 100,
    features: {
      basicSearch: true,
      listingPost: true,
      maxPhotos: 15,
      analytics: true,
      prioritySupport: true,
      aiValuation: true,
      featuredListing: false,
      marketReports: true,
      priceAlerts: true,
      portfolioTracking: true,
    },
    isActive: true,
  },
  {
    id: 'fallback-enterprise',
    tier: 'ENTERPRISE',
    name: 'Enterprise',
    priceMonthlyVND: '4990000',
    priceYearlyVND: '49900000',
    maxListings: -1,
    maxSavedSearches: -1,
    features: {
      basicSearch: true,
      listingPost: true,
      maxPhotos: 100,
      analytics: true,
      prioritySupport: true,
      aiValuation: true,
      featuredListing: true,
      leadManagement: true,
      agentProfile: true,
      marketReports: true,
      priceAlerts: true,
      portfolioTracking: true,
      apiAccess: true,
      whiteLabel: true,
      dedicatedSupport: true,
    },
    isActive: true,
  },
];

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

// Feature labels mapped for the comparison table
const FEATURE_LABELS: Record<string, string> = {
  maxListings: 'Tin đăng',
  maxSavedSearches: 'Tìm kiếm đã lưu',
  maxPhotos: 'Ảnh/tin đăng',
  analytics: 'Phân tích thị trường',
  prioritySupport: 'Hỗ trợ ưu tiên',
  aiValuation: 'Định giá AI',
  featuredListing: 'Tin đăng nổi bật',
  leadManagement: 'Quản lý khách hàng',
  agentProfile: 'Hồ sơ môi giới',
  marketReports: 'Báo cáo thị trường',
  priceAlerts: 'Cảnh báo giá',
  portfolioTracking: 'Theo dõi danh mục',
  apiAccess: 'Truy cập API',
  whiteLabel: 'Giao diện riêng',
  dedicatedSupport: 'Hỗ trợ chuyên biệt',
};

const COMPARISON_FEATURES = [
  'maxListings',
  'maxSavedSearches',
  'maxPhotos',
  'analytics',
  'aiValuation',
  'featuredListing',
  'prioritySupport',
  'leadManagement',
  'agentProfile',
  'marketReports',
  'priceAlerts',
  'portfolioTracking',
  'apiAccess',
  'whiteLabel',
  'dedicatedSupport',
];

function getFeatureValue(
  plan: PlanDto,
  key: string,
): boolean | number | string {
  if (key === 'maxListings') {
    return plan.maxListings === -1 ? 'Không giới hạn' : plan.maxListings;
  }
  if (key === 'maxSavedSearches') {
    return plan.maxSavedSearches === -1
      ? 'Không giới hạn'
      : plan.maxSavedSearches;
  }
  if (key === 'maxPhotos') {
    return plan.features['maxPhotos'] ?? false;
  }
  return plan.features[key] ?? false;
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export default function PricingPage() {
  const t = useTranslations('pricing');
  const { data: plansData, isLoading, error } = usePlans();
  const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>(
    'monthly',
  );

  const plans = (plansData ?? (error ? FALLBACK_PLANS : []))
    .slice()
    .sort(
      (a, b) =>
        PLAN_TIER_ORDER.indexOf(a.tier) - PLAN_TIER_ORDER.indexOf(b.tier),
    );

  return (
    <div className="bg-background">
      {/* Hero section */}
      <section className="relative overflow-hidden border-b bg-gradient-to-b from-primary/5 to-background pb-16 pt-16 sm:pt-24">
        <div className="mx-auto max-w-7xl px-4 text-center">
          <Badge variant="secondary" className="mb-4">
            {t('badge')}
          </Badge>
          <h1 className="text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl">
            {t('title')}
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">
            {t('subtitle')}
          </p>

          {/* Billing cycle toggle */}
          <div className="mt-8 flex items-center justify-center gap-3">
            <Button
              variant={billingCycle === 'monthly' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setBillingCycle('monthly')}
            >
              {t('monthly')}
            </Button>
            <Button
              variant={billingCycle === 'yearly' ? 'default' : 'outline'}
              size="sm"
              onClick={() => setBillingCycle('yearly')}
            >
              {t('yearly')}
              <Badge variant="secondary" className="ml-2">
                {t('yearlyDiscount')}
              </Badge>
            </Button>
          </div>
        </div>
      </section>

      {/* Pricing cards */}
      <section className="mx-auto -mt-10 max-w-7xl px-4 pb-16">
        {isLoading ? (
          <div className="flex h-64 items-center justify-center text-muted-foreground">
            {t('loading')}
          </div>
        ) : (
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {plans.map((plan) => {
              const isPopular = plan.tier === 'AGENT_PRO';
              const price =
                billingCycle === 'monthly'
                  ? plan.priceMonthlyVND
                  : plan.priceYearlyVND;

              return (
                <Card
                  key={plan.id}
                  className={cn(
                    'relative flex flex-col transition-shadow hover:shadow-lg',
                    isPopular && 'border-primary shadow-md ring-1 ring-primary',
                  )}
                >
                  {isPopular && (
                    <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                      <Badge className="bg-primary text-primary-foreground">
                        {t('popular')}
                      </Badge>
                    </div>
                  )}
                  <CardHeader className="pb-2">
                    <div
                      className={cn(
                        'mb-2 flex items-center gap-2',
                        TIER_COLORS[plan.tier],
                      )}
                    >
                      {TIER_ICONS[plan.tier]}
                      <CardTitle className="text-lg">
                        {t(`tiers.${plan.tier}`)}
                      </CardTitle>
                    </div>
                    <CardDescription className="text-sm">
                      {t(`tierDescriptions.${plan.tier}`)}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="flex flex-1 flex-col">
                    {/* Price */}
                    <div className="mb-6">
                      <span className="text-3xl font-bold text-foreground">
                        {formatVND(price)}
                      </span>
                      {Number(price) > 0 && (
                        <span className="text-sm text-muted-foreground">
                          /{billingCycle === 'monthly' ? t('perMonth') : t('perYear')}
                        </span>
                      )}
                    </div>

                    {/* Key features list */}
                    <ul className="mb-6 flex-1 space-y-2.5 text-sm">
                      <li className="flex items-center gap-2">
                        <Check className="h-4 w-4 shrink-0 text-green-600" />
                        <span>
                          {plan.maxListings === -1
                            ? t('unlimited')
                            : `${plan.maxListings} ${t('listingsCount')}`}
                        </span>
                      </li>
                      <li className="flex items-center gap-2">
                        <Check className="h-4 w-4 shrink-0 text-green-600" />
                        <span>
                          {plan.maxSavedSearches === -1
                            ? t('unlimited')
                            : `${plan.maxSavedSearches} ${t('savedSearchesCount')}`}
                        </span>
                      </li>
                      <li className="flex items-center gap-2">
                        <Check className="h-4 w-4 shrink-0 text-green-600" />
                        <span>{plan.features['maxPhotos']} {t('photosPerListing')}</span>
                      </li>
                      {plan.features['analytics'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.analytics')}</span>
                        </li>
                      )}
                      {plan.features['aiValuation'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.aiValuation')}</span>
                        </li>
                      )}
                      {plan.features['prioritySupport'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.prioritySupport')}</span>
                        </li>
                      )}
                      {plan.features['featuredListing'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.featuredListing')}</span>
                        </li>
                      )}
                      {plan.features['leadManagement'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.leadManagement')}</span>
                        </li>
                      )}
                      {plan.features['marketReports'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.marketReports')}</span>
                        </li>
                      )}
                      {plan.features['portfolioTracking'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.portfolioTracking')}</span>
                        </li>
                      )}
                      {plan.features['apiAccess'] && (
                        <li className="flex items-center gap-2">
                          <Check className="h-4 w-4 shrink-0 text-green-600" />
                          <span>{t('features.apiAccess')}</span>
                        </li>
                      )}
                    </ul>

                    {/* CTA */}
                    <Link href={'/register' as const} className="w-full">
                      <Button
                        className="w-full"
                        variant={isPopular ? 'default' : 'outline'}
                        size="lg"
                      >
                        {plan.tier === 'FREE'
                          ? t('ctaFree')
                          : plan.tier === 'ENTERPRISE'
                            ? t('ctaEnterprise')
                            : t('ctaUpgrade')}
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        )}
      </section>

      {/* Feature comparison table */}
      <section className="border-t bg-muted/30 py-16">
        <div className="mx-auto max-w-7xl px-4">
          <h2 className="mb-2 text-center text-2xl font-bold">
            {t('comparisonTitle')}
          </h2>
          <p className="mb-8 text-center text-muted-foreground">
            {t('comparisonSubtitle')}
          </p>

          <div className="overflow-x-auto">
            <table className="w-full min-w-[640px] border-collapse">
              <thead>
                <tr className="border-b">
                  <th className="px-4 py-3 text-left text-sm font-semibold">
                    {t('feature')}
                  </th>
                  {plans.map((plan) => (
                    <th
                      key={plan.id}
                      className={cn(
                        'px-4 py-3 text-center text-sm font-semibold',
                        plan.tier === 'AGENT_PRO' && 'bg-primary/5',
                      )}
                    >
                      {t(`tiers.${plan.tier}`)}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {COMPARISON_FEATURES.map((featureKey) => (
                  <tr key={featureKey} className="border-b last:border-0">
                    <td className="px-4 py-3 text-sm text-muted-foreground">
                      {FEATURE_LABELS[featureKey]}
                    </td>
                    {plans.map((plan) => {
                      const val = getFeatureValue(plan, featureKey);
                      return (
                        <td
                          key={plan.id}
                          className={cn(
                            'px-4 py-3 text-center text-sm',
                            plan.tier === 'AGENT_PRO' && 'bg-primary/5',
                          )}
                        >
                          {typeof val === 'boolean' ? (
                            val ? (
                              <Check className="mx-auto h-4 w-4 text-green-600" />
                            ) : (
                              <X className="mx-auto h-4 w-4 text-muted-foreground/40" />
                            )
                          ) : (
                            <span className="font-medium">{String(val)}</span>
                          )}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* FAQ / CTA section */}
      <section className="py-16">
        <div className="mx-auto max-w-3xl px-4 text-center">
          <h2 className="text-2xl font-bold">{t('ctaTitle')}</h2>
          <p className="mt-3 text-muted-foreground">
            {t('ctaDescription')}
          </p>
          <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
            <Link href={'/register' as const}>
              <Button size="lg">{t('ctaRegister')}</Button>
            </Link>
            <Link href={'/' as const}>
              <Button variant="outline" size="lg">
                {t('ctaLearnMore')}
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}