'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { apiFetch } from '../../../lib/auth';
import { Skeleton } from '@/components/ui/skeleton';
import { Card } from '@/components/ui/card';
import { useT } from '@/i18n';
import { Heart, Link2, Sparkles } from 'lucide-react';

export default function MemberPage() {
  const t = useT();
  const [quota, setQuota] = useState<{ used: number; remaining: number; dailyLimit: number } | null>(null);
  const [loading, setLoading] = useState(true);

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

  if (loading) return (
    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <Skeleton className="h-8 w-48 mb-2" />
      <Skeleton className="h-5 w-64 mb-8" />
      <Skeleton className="h-40 rounded-2xl mb-6" />
      <Skeleton className="h-48 rounded-2xl" />
    </div>
  );

  return (
    <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <Link href="/my" className="text-sm text-muted-foreground hover:text-brand-600 mb-2 inline-block">&larr; {t.myLearning.back}</Link>
        <h1 className="text-3xl font-bold text-foreground">{t.member.title}</h1>
        <p className="mt-2 text-muted-foreground">{t.member.desc}</p>
      </div>

      {quota && (
        <Card className="p-6 mb-6">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm font-medium text-foreground">{t.member.dailyQuota}</span>
            <span className="text-sm text-muted-foreground">
              {t.member.used.replace('{n}', String(quota.used))} / {quota.dailyLimit}
            </span>
          </div>
          <div className="w-full bg-muted rounded-full h-3">
            <div
              className="bg-brand-600 h-3 rounded-full transition-all"
              style={{ width: `${Math.min((quota.used / quota.dailyLimit) * 100, 100)}%` }}
            />
          </div>
        </Card>
      )}

      <Card className="p-8 mb-6 bg-gradient-to-br from-brand-50 to-white dark:from-brand-950/20 dark:to-background text-center">
        <div className="inline-flex w-12 h-12 bg-brand-100 dark:bg-brand-900/30 rounded-2xl items-center justify-center mb-4">
          <Sparkles className="w-6 h-6 text-brand-600 dark:text-brand-400" />
        </div>
        <h2 className="text-xl font-semibold text-foreground">{t.member.freeUser}</h2>
        <p className="mt-2 text-muted-foreground max-w-xl mx-auto">{t.member.benefits}</p>
      </Card>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Link href="/donate" className="block">
          <Card className="p-6 h-full hover:shadow-md transition-all flex flex-col">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 bg-rose-100 dark:bg-rose-900/30 rounded-xl flex items-center justify-center">
                <Heart className="w-5 h-5 text-rose-600 dark:text-rose-400" />
              </div>
              <h3 className="font-semibold text-foreground">{t.donate.supportUs}</h3>
            </div>
            <p className="text-sm text-muted-foreground flex-1">{t.donate.supportDesc}</p>
            <span className="mt-4 text-sm font-medium text-brand-600 dark:text-brand-400">
              {t.donate.toDonate} →
            </span>
          </Card>
        </Link>
        <Link href="/affiliate" className="block">
          <Card className="p-6 h-full hover:shadow-md transition-all flex flex-col">
            <div className="flex items-center gap-3 mb-3">
              <div className="w-10 h-10 bg-brand-100 dark:bg-brand-900/30 rounded-xl flex items-center justify-center">
                <Link2 className="w-5 h-5 text-brand-600 dark:text-brand-400" />
              </div>
              <h3 className="font-semibold text-foreground">{t.donate.affiliate}</h3>
            </div>
            <p className="text-sm text-muted-foreground flex-1">{t.affiliate.desc}</p>
            <span className="mt-4 text-sm font-medium text-brand-600 dark:text-brand-400">
              {t.affiliate.title} →
            </span>
          </Card>
        </Link>
      </div>

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