import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, CheckCircle, XCircle, Clock } from "lucide-react";
import AiGradingAssistant from "@/components/ai/AiGradingAssistant";
import { useToast } from "@/hooks/use-toast";

const workflows = [
  {
    id: 1, name: "Exam Content Review", status: "In Progress",
    steps: [
      { name: "Initial Review", assignee: "Dr. Smith", status: "Approved" },
      { name: "Quality Check", assignee: "Prof. Lee", status: "Pending" },
      { name: "Final Approval", assignee: "Admin", status: "Waiting" },
    ],
  },
  {
    id: 2, name: "Rubric Approval", status: "Completed",
    steps: [
      { name: "Draft Review", assignee: "Mr. Kim", status: "Approved" },
      { name: "Academic Board", assignee: "Dr. Smith", status: "Approved" },
    ],
  },
  {
    id: 3, name: "New Exam Structure", status: "Rejected",
    steps: [
      { name: "Content Review", assignee: "Prof. Lee", status: "Approved" },
      { name: "Standards Check", assignee: "Dr. Smith", status: "Rejected" },
    ],
  },
];

const statusIcon = (s: string) => {
  if (s === "Approved") return <CheckCircle className="h-4 w-4 text-success" />;
  if (s === "Rejected") return <XCircle className="h-4 w-4 text-destructive" />;
  return <Clock className="h-4 w-4 text-warning" />;
};

export default function ApprovalWorkflowsPage() {
  const { toast } = useToast();
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Approval Workflows</h1>
          <p className="text-muted-foreground">Manage multi-step approval processes for exam content.</p>
        </div>
        <Dialog>
          <DialogTrigger asChild>
            <Button size="sm"><Plus className="h-4 w-4 mr-1" /> Create Workflow</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader><DialogTitle>Create Workflow</DialogTitle></DialogHeader>
            <div className="space-y-4">
              <div className="space-y-2"><Label>Workflow Name</Label><Input placeholder="e.g. Exam Content Review" /></div>
              <div className="space-y-2">
                <Label>Step 1 — Assignee</Label>
                <Select><SelectTrigger><SelectValue placeholder="Select assignee" /></SelectTrigger>
                  <SelectContent><SelectItem value="smith">Dr. Smith</SelectItem><SelectItem value="lee">Prof. Lee</SelectItem><SelectItem value="kim">Mr. Kim</SelectItem></SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Step 2 — Assignee</Label>
                <Select><SelectTrigger><SelectValue placeholder="Select assignee" /></SelectTrigger>
                  <SelectContent><SelectItem value="smith">Dr. Smith</SelectItem><SelectItem value="lee">Prof. Lee</SelectItem><SelectItem value="admin">Admin</SelectItem></SelectContent>
                </Select>
              </div>
              <Button className="w-full">Create</Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      <div className="space-y-4">
        {workflows.map((wf) => (
          <Card key={wf.id} className="border-0 shadow-sm">
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base font-semibold">{wf.name}</CardTitle>
                <Badge variant={wf.status === "Completed" ? "default" : wf.status === "Rejected" ? "destructive" : "secondary"}>{wf.status}</Badge>
              </div>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-2">
                {wf.steps.map((step, i) => (
                  <div key={i} className="flex items-center gap-2">
                    <div className="flex items-center gap-2 rounded-lg border p-3 bg-muted/30 min-w-[160px]">
                      {statusIcon(step.status)}
                      <div>
                        <p className="text-sm font-medium">{step.name}</p>
                        <p className="text-xs text-muted-foreground">{step.assignee}</p>
                      </div>
                    </div>
                    {i < wf.steps.length - 1 && <div className="w-8 h-0.5 bg-border" />}
                  </div>
                ))}
              </div>
              {wf.status === "In Progress" && (
                <div className="space-y-4 mt-4">
                  <AiGradingAssistant onAccept={(marks, feedback) => {
                    toast({ title: "AI Grade Accepted", description: `Marks: ${marks}/100 applied with AI feedback.` });
                  }} />
                  <div className="flex gap-2">
                    <Button size="sm" variant="default">Approve</Button>
                    <Button size="sm" variant="outline">Reject</Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}
