'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 { useT } from '@/i18n';
import { API_BASE } from '@/lib/config';
import { useAuth } from '@/lib/auth-context';
import { apiFetch } from '@/lib/auth';

interface Practice {
  id: number;
  title: string;
  scenario: string;
  description: string;
  difficulty: string;
  category: string;
  attemptCount: number;
  sortOrder: number;
  createdAt: string;
}

interface Submission {
  id: number;
  questionId: number;
  score: number | null;
  status: string;
  submittedAt: string;
}

const difficultyColors: Record<string, string> = {
  BEGINNER: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
  INTERMEDIATE: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
  ADVANCED: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
};

export default function PracticesPage() {
  const t = useT();
  const { isLoggedIn } = useAuth();
  const [practices, setPractices] = useState<Practice[]>([]);
  const [categories, setCategories] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [category, setCategory] = useState('');
  const [difficulty, setDifficulty] = useState('');
  const [search, setSearch] = useState('');
  const [submissions, setSubmissions] = useState<Record<number, Submission>>({});

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

  useEffect(() => {
    if (!isLoggedIn) return;
    apiFetch('/practices/submissions?limit=100')
      .then(r => r.json())
      .then(data => {
        const map: Record<number, Submission> = {};
        (data.items || []).forEach((s: Submission) => { map[s.questionId] = s; });
        setSubmissions(map);
      })
      .catch(() => {});
  }, [isLoggedIn]);

  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}/practices?${params}`)
      .then(r => r.json())
      .then(data => setPractices(data.items || []));
  }, [category, difficulty, search]);

  const difficulties = [
    { id: 'BEGINNER', name: t.practices.beginner },
    { id: 'INTERMEDIATE', name: t.practices.intermediate },
    { id: 'ADVANCED', name: t.practices.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.practices.title}</h1>
        <p className="mt-2 text-muted-foreground">{t.practices.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.common.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.practices.allCategories}</option>
          {categories.map(c => <option key={c} value={c}>{(t.practices.categories as any)[c] || c}</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.practices.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-44 rounded-2xl" />)}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {practices.map(p => {
            const sub = submissions[p.id];
            return (
              <Link key={p.id} href={`/practices/${p.id}`}
                className="bg-card rounded-2xl border border-border p-6 hover:shadow-md transition-all hover:-translate-y-0.5 group">
                <div className="mb-2 flex items-start justify-between gap-2">
                  <span className={`text-xs px-2 py-0.5 rounded-full ${difficultyColors[p.difficulty] || ''}`}>
                    {(t.practices as any)[p.difficulty.toLowerCase()] || p.difficulty}
                  </span>
                  {sub && (
                    <span className={`text-xs px-2 py-0.5 rounded-full ${
                      sub.status === 'SCORED' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' :
                      'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
                    }`}>
                      {sub.status === 'SCORED' ? t.practices.scoreRange.replace('{score}', String(sub.score)).replace('{max}', '100') : (t.practices.status as any)[sub.status]}
                    </span>
                  )}
                </div>
                <h3 className="font-semibold text-foreground group-hover:text-brand-600 transition-colors mb-1">{p.title}</h3>
                <p className="text-sm text-muted-foreground line-clamp-2 mb-3">{p.description}</p>
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <span>{(t.practices.categories as any)[p.category] || p.category}</span>
                  <span>·</span>
                  <span>{p.attemptCount} 次练习</span>
                </div>
              </Link>
            );
          })}
        </div>
      )}
    </div>
  );
}