'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { apiFetch } from '@/lib/auth';
import { useAuth } from '@/lib/auth-context';
import { useT } from '@/i18n';
import { Zap, Heart, ArrowLeft } from 'lucide-react';

interface Quota {
  dailyLimit: number;
  used: number;
  dailyRemaining: number;
  extra: number;
  totalRemaining: number;
}

export default function PackagesPage() {
  const t = useT();
  const { isLoggedIn } = useAuth();
  const [quota, setQuota] = useState<Quota | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!isLoggedIn) {
      setLoading(false);
      return;
    }
    apiFetch('/sandbox/quota')
      .then((r) => r.json())
      .then((data) => setQuota(data))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [isLoggedIn]);

  if (!isLoggedIn) {
    return (
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <Zap className="h-12 w-12 text-brand-600 mx-auto mb-4" />
        <h1 className="text-2xl font-bold text-foreground mb-2">{t.packages.title}</h1>
        <p className="text-muted-foreground mb-6">{t.packages.desc}</p>
        <Button asChild>
          <Link href="/auth">{t.common.login}</Link>
        </Button>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <Link
        href="/practices"
        className="text-sm text-muted-foreground hover:text-foreground mb-4 inline-block"
      >
        <ArrowLeft className="w-4 h-4 inline mr-1" />
        {t.practices.title}
      </Link>

      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">{t.packages.title}</h1>
        <p className="mt-2 text-muted-foreground">{t.packages.desc}</p>
      </div>

      {loading ? (
        <Skeleton className="h-32 rounded-2xl mb-8" />
      ) : (
        quota && (
          <Card className="p-6 mb-8">
            <h2 className="font-semibold text-foreground mb-3">{t.packages.currentQuota}</h2>
            <div className="flex flex-wrap gap-6">
              <div>
                <span className="text-sm text-muted-foreground">
                  {t.packages.dailyQuota
                    .replace('{used}', String(quota.used))
                    .replace('{limit}', String(quota.dailyLimit))}
                </span>
              </div>
              <div>
                <span className="text-sm text-muted-foreground">
                  {t.packages.extraQuota.replace('{n}', String(quota.extra))}
                </span>
              </div>
            </div>
          </Card>
        )
      )}

      <Card className="p-8 mb-8 bg-gradient-to-br from-rose-50 to-white dark:from-rose-950/20 dark:to-background text-center">
        <div className="inline-flex w-12 h-12 bg-rose-100 dark:bg-rose-900/30 rounded-2xl items-center justify-center mb-4">
          <Heart className="w-6 h-6 text-rose-600 dark:text-rose-400" />
        </div>
        <h2 className="text-xl font-semibold text-foreground">{t.donate.supportTitle}</h2>
        <p className="mt-2 text-muted-foreground max-w-xl mx-auto">{t.donate.supportDesc}</p>
        <Button asChild className="mt-5 gap-2">
          <Link href="/donate">
            <Heart className="w-4 h-4" />
            {t.donate.toDonate}
          </Link>
        </Button>
      </Card>

      <p className="text-xs text-muted-foreground text-center max-w-2xl mx-auto">
        {t.donate.disclaimer}
      </p>
    </div>
  );
}
