'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { Cloud, ExternalLink, ArrowRight, Server, Database, Globe, Cpu } from 'lucide-react';
import { API_BASE } from '@/lib/config';

const categoryIcons: Record<string, typeof Cloud> = {
  '阿里云': Cloud,
  '云大使': Server,
};

function ResourceSkeleton() {
  return (
    <Card className="p-5">
      <Skeleton className="h-5 w-3/4 mb-2" />
      <Skeleton className="h-4 w-full mb-3" />
      <Skeleton className="h-4 w-1/3" />
    </Card>
  );
}

const categoryLabels: Record<string, string> = {
  '云服务器': '云服务器',
  '存储': '存储',
  'AI': 'AI 服务',
  '建站': '建站',
};

export default function ResourcesPage() {
  const [resources, setResources] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${API_BASE}/tools?categoryId=9`)
      .then(r => r.json()).then(data => setResources(data.items || []))
      .catch(() => {}).finally(() => setLoading(false));
  }, []);

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      {/* Header */}
      <div className="mb-10">
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center">
            <Cloud className="w-6 h-6 text-brand-600 dark:text-brand-400" />
          </div>
          <div>
            <h1 className="text-3xl font-bold text-foreground">云资源推荐</h1>
            <p className="text-muted-foreground mt-1">精选云服务商优惠活动与资源推荐，助你低成本上云</p>
          </div>
        </div>
      </div>

      {/* Intro Banner */}
      <Card className="p-6 mb-10 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 border-blue-200 dark:border-blue-800">
        <div className="flex items-start gap-4">
          <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center shrink-0">
            <Globe className="w-5 h-5 text-blue-600 dark:text-blue-400" />
          </div>
          <div>
            <h3 className="font-semibold text-lg mb-1">阿里云官方推荐</h3>
            <p className="text-sm text-muted-foreground">
              以下链接为阿里云官方推广合作，通过本站链接访问可享受专属优惠价格。
              云服务器、存储、AI 服务等热门产品均有活动，适合个人开发者与企业用户。
            </p>
          </div>
        </div>
      </Card>

      {/* Resource List */}
      {loading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[1,2,3,4,5,6].map(i => <ResourceSkeleton key={i} />)}
        </div>
      ) : resources.length === 0 ? (
        <div className="text-center py-20 text-muted-foreground">
          <Cloud className="w-12 h-12 mx-auto mb-4 opacity-30" />
          <p>暂无云资源推荐</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {resources.map((item: any) => (
            <a
              key={item.id}
              href={item.affiliateLink || item.url}
              target="_blank"
              rel="noopener noreferrer"
              className="block group"
            >
              <Card className="p-5 hover:shadow-md hover:border-brand-200 dark:hover:border-brand-800 transition-all group h-full flex flex-col">
                <div className="flex items-start gap-3 mb-3">
                  <div className="w-10 h-10 bg-amber-100 dark:bg-amber-900/30 rounded-xl flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform">
                    <Server className="w-5 h-5 text-amber-600 dark:text-amber-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold group-hover:text-brand-600 transition-colors line-clamp-1">{item.name}</h3>
                    <p className="text-sm text-muted-foreground line-clamp-2 mt-0.5">{item.description}</p>
                  </div>
                </div>
                <div className="flex items-center gap-2 mt-auto">
                  {item.tags?.split(',').slice(0, 2).map((tag: string) => (
                    <Badge key={tag} variant="secondary" className="text-xs">{tag.trim()}</Badge>
                  ))}
                  <span className="ml-auto text-xs text-brand-600 group-hover:underline inline-flex items-center gap-1">
                    查看详情 <ExternalLink className="w-3 h-3" />
                  </span>
                </div>
              </Card>
            </a>
          ))}
        </div>
      )}

      {/* Footer Note */}
      <div className="mt-12 text-center text-xs text-muted-foreground">
        <p>本站部分链接为阿里云推广合作链接，通过本链接购买可能会产生推广佣金，不影响您的购买价格。</p>
      </div>
    </div>
  );
}
