import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { CheckCircle, BookA, Sparkles } from "lucide-react";
import AiTipBanner from "@/components/ai/AiTipBanner";

const vocabItems = [
  { word: "Ubiquitous", meaning: "Present, appearing, or found everywhere", level: "C1", completed: true },
  { word: "Pragmatic", meaning: "Dealing with things sensibly and realistically", level: "B2", completed: true },
  { word: "Eloquent", meaning: "Fluent or persuasive in speaking or writing", level: "C1", completed: false },
  { word: "Meticulous", meaning: "Showing great attention to detail", level: "B2", completed: false },
  { word: "Ambiguous", meaning: "Open to more than one interpretation", level: "B2", completed: false },
  { word: "Coherent", meaning: "Logical and consistent", level: "B1", completed: false },
  { word: "Versatile", meaning: "Able to adapt to many different functions", level: "B2", completed: true },
  { word: "Concise", meaning: "Giving a lot of information in few words", level: "B1", completed: false },
];

export default function VocabularyPage() {
  const [showCompleted, setShowCompleted] = useState(false);
  const completed = vocabItems.filter(v => v.completed).length;
  const filtered = showCompleted ? vocabItems : vocabItems.filter(v => !v.completed);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Vocabulary Training</h1>
        <p className="text-muted-foreground">Build your vocabulary for IELTS success.</p>
      </div>

      <AiTipBanner context="vocabulary" variant="recommendation" />

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-4">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base">Progress</CardTitle>
                <span className="text-sm text-muted-foreground">{completed}/{vocabItems.length} completed</span>
              </div>
            </CardHeader>
            <CardContent>
              <Progress value={(completed / vocabItems.length) * 100} className="h-3" />
            </CardContent>
          </Card>

          <div className="flex items-center gap-2">
            <Switch id="show" checked={showCompleted} onCheckedChange={setShowCompleted} />
            <Label htmlFor="show" className="text-sm">Show completed</Label>
          </div>

          <div className="space-y-2">
            {filtered.map((v) => (
              <Card key={v.word} className="border-0 shadow-sm">
                <CardContent className="p-4 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {v.completed && <CheckCircle className="h-4 w-4 text-success shrink-0" />}
                    <div>
                      <p className="font-semibold text-sm">{v.word}</p>
                      <p className="text-xs text-muted-foreground">{v.meaning}</p>
                    </div>
                  </div>
                  <Badge variant="outline">{v.level}</Badge>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

        <div className="space-y-4">
          <Card className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <CardTitle className="text-base flex items-center gap-2"><Sparkles className="h-4 w-4 text-primary" /> AI Recommendations</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2">
                <li className="text-sm text-muted-foreground flex items-start gap-2"><span className="text-primary font-bold">•</span>Learn "coherent" + "concise" together — they share academic writing context</li>
                <li className="text-sm text-muted-foreground flex items-start gap-2"><span className="text-primary font-bold">•</span>Review C1-level vocabulary for IELTS Task 2</li>
                <li className="text-sm text-muted-foreground flex items-start gap-2"><span className="text-primary font-bold">•</span>Focus on collocations with 'make' and 'do'</li>
                <li className="text-sm text-muted-foreground flex items-start gap-2"><span className="text-primary font-bold">•</span>Try using "meticulous" in your next writing practice</li>
              </ul>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm border-primary/20 bg-primary/5">
            <CardContent className="p-4">
              <p className="text-xs font-semibold text-primary flex items-center gap-1 mb-2"><Sparkles className="h-3 w-3" /> AI Vocabulary Goal</p>
              <p className="text-sm text-muted-foreground">At 2 words/day, you'll complete this set by March 15. AI recommends adding 10 more domain-specific words from your upcoming exam topics.</p>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
