'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Skeleton } from '@/components/ui/skeleton';
import { useT } from '@/i18n';
import { API_BASE } from '@/lib/config';

interface Skill {
  id: string; name: string; description: string; icon: string;
  category: string; difficulty: string;
  starters: string[]; tags: string[];
}

export default function SkillsPage() {
  const t = useT();
  const [skills, setSkills] = useState<Skill[]>([]);
  const [categories, setCategories] = useState<{ id: string; name: string }[]>([]);
  const [loading, setLoading] = useState(true);
  const [category, setCategory] = useState('');
  const [difficulty, setDifficulty] = useState('');
  const [search, setSearch] = useState('');

  useEffect(() => {
    Promise.all([
      fetch(`${API_BASE}/skills`).then(r => r.json()),
      fetch(`${API_BASE}/skills/categories`).then(r => r.json()),
    ]).then(([skillsData, cats]) => {
      setSkills(skillsData.items || []);
      setCategories(cats || []);
    }).finally(() => setLoading(false));
  }, []);

  useEffect(() => {
    const params = new URLSearchParams();
    if (category) params.set('category', category);
    if (difficulty) params.set('difficulty', difficulty);
    if (search) params.set('search', search);
    fetch(`${API_BASE}/skills?${params}`)
      .then(r => r.json())
      .then(data => setSkills(data.items || []));
  }, [category, difficulty, search]);

  const difficulties = [
    { id: 'beginner', name: t.skills.beginner },
    { id: 'intermediate', name: t.skills.intermediate },
    { id: 'advanced', name: t.skills.advanced },
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">{t.skills.title}</h1>
        <p className="mt-2 text-muted-foreground">{t.skills.desc}</p>
      </div>

      <div className="flex flex-wrap gap-3 mb-8">
        <input type="text" value={search} onChange={e => setSearch(e.target.value)}
          placeholder={t.skills.search}
          className="px-3 py-2 border border-border rounded-lg text-sm bg-background text-foreground w-48" />
        <select value={category} onChange={e => setCategory(e.target.value)}
          className="px-3 py-2 border border-border rounded-lg text-sm bg-background text-foreground">
          <option value="">{t.skills.allCategories}</option>
          {categories.map(c => <option key={c.id} value={c.id}>{(t.skills.categories as any)[c.id] || c.name}</option>)}
        </select>
        <select value={difficulty} onChange={e => setDifficulty(e.target.value)}
          className="px-3 py-2 border border-border rounded-lg text-sm bg-background text-foreground">
          <option value="">{t.skills.allDifficulties}</option>
          {difficulties.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
        </select>
      </div>

      {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 => <Skeleton key={i} className="h-40 rounded-2xl" />)}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {skills.map(skill => (
            <Link key={skill.id} href={`/skills/${skill.id}`}
              className="bg-card rounded-2xl border border-border p-6 hover:shadow-md transition-all hover:-translate-y-0.5 group">
              <div className="flex items-start gap-3 mb-3">
                <span className="text-2xl">{skill.icon}</span>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-foreground group-hover:text-brand-600 transition-colors">{skill.name}</h3>
                  <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">{skill.description}</p>
                </div>
              </div>
              <div className="flex items-center gap-2 mb-3">
                <span className={`text-xs px-2 py-0.5 rounded-full ${
                  skill.difficulty === 'beginner' ? 'bg-green-100 text-green-700' :
                  skill.difficulty === 'intermediate' ? 'bg-yellow-100 text-yellow-700' :
                  'bg-red-100 text-red-700'
                }`}>
                  {(t.skills as any)[skill.difficulty]}
                </span>
                <span className="text-xs text-muted-foreground">{(t.skills.categories as any)[skill.category] || skill.category}</span>
              </div>
              <div className="flex flex-wrap gap-1">
                {skill.tags.slice(0, 3).map(tag => (
                  <span key={tag} className="text-xs px-1.5 py-0.5 bg-muted text-muted-foreground rounded">{tag}</span>
                ))}
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}
