import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Wand2, CheckCircle } from "lucide-react";
import AiGeneratorModal from "@/components/ai/AiGeneratorModal";
import AiTipBanner from "@/components/ai/AiTipBanner";
import AiCreationAssistant from "@/components/ai/AiCreationAssistant";

export default function GenerationPage() {
  const [submitted, setSubmitted] = useState(false);

  if (submitted) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <Card className="border-0 shadow-sm max-w-md w-full">
          <CardContent className="p-8 text-center">
            <div className="mx-auto mb-4 h-16 w-16 rounded-full bg-success/10 flex items-center justify-center">
              <CheckCircle className="h-8 w-8 text-success" />
            </div>
            <h2 className="text-xl font-bold mb-2">Exam Generated!</h2>
            <p className="text-muted-foreground mb-6">Your exam has been created successfully and is ready for review.</p>
            <Button onClick={() => setSubmitted(false)}>Generate Another</Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="space-y-6 max-w-2xl">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">Exam Generation</h1>
        <p className="text-muted-foreground">Generate a new exam from structure templates.</p>
      </div>

      <AiTipBanner tip="AI can auto-generate a full exam with questions, rubric linkage, and difficulty balancing. Try 'AI Generate Exam' for instant creation." variant="recommendation" />

      <div className="flex gap-2">
        <AiGeneratorModal />
        <AiCreationAssistant type="exam" />
      </div>

      <Card className="border-0 shadow-sm">
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2"><Wand2 className="h-4 w-4 text-primary" /> Generation Form</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} className="space-y-5">
            <div className="space-y-2"><Label>Exam Title</Label><Input placeholder="e.g. Q2 2025 IELTS Mock" /></div>
            <div className="space-y-2"><Label>Exam Label</Label><Input placeholder="e.g. MOCK-Q2-2025" /></div>
            <div className="space-y-2">
              <Label>Exam Structure</Label>
              <Select><SelectTrigger><SelectValue placeholder="Select structure" /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="standard">Standard IELTS Academic</SelectItem>
                  <SelectItem value="corporate">Corporate English Assessment</SelectItem>
                  <SelectItem value="hospitality">Hospitality English Test</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Modules</Label>
              <div className="flex flex-wrap gap-4">
                {["Reading", "Listening", "Writing", "Speaking"].map((m) => (
                  <div key={m} className="flex items-center gap-2">
                    <Checkbox id={`gen-${m}`} defaultChecked /><Label htmlFor={`gen-${m}`} className="text-sm font-normal">{m}</Label>
                  </div>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Level</Label>
                <Select><SelectTrigger><SelectValue placeholder="Level" /></SelectTrigger>
                  <SelectContent>{["A1","A2","B1","B2","C1","C2"].map(l => <SelectItem key={l} value={l}>{l}</SelectItem>)}</SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Industry</Label>
                <Select><SelectTrigger><SelectValue placeholder="Industry" /></SelectTrigger>
                  <SelectContent><SelectItem value="general">General</SelectItem><SelectItem value="tech">Technology</SelectItem><SelectItem value="health">Healthcare</SelectItem></SelectContent>
                </Select>
              </div>
            </div>
            <Button type="submit" className="w-full"><Wand2 className="h-4 w-4 mr-2" /> Generate Exam</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}
