import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Check, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { placementService } from "@/services/placement.service";
import { ApiError } from "@/lib/api-client";

const fullFeatures = [
  "Unlimited adaptive lessons",
  "Speaking feedback & analytics",
  "Full placement history",
  "Priority instructor Q&A",
];

const trialFeatures = ["7 days full access", "Placement results saved", "Email reminders before trial ends"];

const skipFeatures = ["Dashboard access", "Limited preview content", "Upgrade any time"];

export default function PlacementAccess() {
  const navigate = useNavigate();
  const [trialLoading, setTrialLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const startTrial = async () => {
    setError(null);
    setTrialLoading(true);
    try {
      await placementService.startTrial();
      navigate("/student/dashboard");
    } catch (e) {
      setError(e instanceof ApiError ? e.message : "Could not start trial");
    } finally {
      setTrialLoading(false);
    }
  };

  return (
    <div className="max-w-6xl mx-auto py-12 px-4">
      <div className="text-center mb-10 space-y-2">
        <h1 className="text-3xl font-bold tracking-tight">Choose how you want to continue</h1>
        <p className="text-muted-foreground max-w-2xl mx-auto">
          Unlock the full adaptive pathway or explore on your own terms.
        </p>
      </div>

      {error && (
        <p className="text-center text-sm text-destructive mb-6 bg-destructive/10 rounded-lg py-2 px-4 max-w-xl mx-auto">
          {error}
        </p>
      )}

      <div className="grid gap-6 md:grid-cols-3 items-stretch">
        <Card className="border-2 border-primary shadow-lg flex flex-col">
          <CardHeader>
            <CardTitle className="text-xl">Full access</CardTitle>
            <CardDescription>Best value for serious exam prep</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 space-y-4">
            <ul className="space-y-2">
              {fullFeatures.map((f) => (
                <li key={f} className="flex gap-2 text-sm">
                  <Check className="h-4 w-4 shrink-0 text-primary mt-0.5" />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </CardContent>
          <CardFooter>
            <Button className="w-full" size="lg" onClick={() => navigate("/student/subscription")}>
              Subscribe now
            </Button>
          </CardFooter>
        </Card>

        <Card className="border-0 shadow-md bg-muted/40 flex flex-col">
          <CardHeader>
            <CardTitle className="text-xl">Free trial</CardTitle>
            <CardDescription>Try everything for seven days</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 space-y-4">
            <ul className="space-y-2">
              {trialFeatures.map((f) => (
                <li key={f} className="flex gap-2 text-sm">
                  <Check className="h-4 w-4 shrink-0 text-primary mt-0.5" />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </CardContent>
          <CardFooter>
            <Button
              className="w-full"
              size="lg"
              variant="secondary"
              disabled={trialLoading}
              onClick={() => void startTrial()}
            >
              {trialLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Starting
                </>
              ) : (
                "Try free for 7 days"
              )}
            </Button>
          </CardFooter>
        </Card>

        <Card className="border border-dashed flex flex-col">
          <CardHeader>
            <CardTitle className="text-xl">Skip for now</CardTitle>
            <CardDescription>Head straight to your dashboard</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 space-y-4">
            <ul className="space-y-2">
              {skipFeatures.map((f) => (
                <li key={f} className="flex gap-2 text-sm text-muted-foreground">
                  <Check className="h-4 w-4 shrink-0 mt-0.5" />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </CardContent>
          <CardFooter>
            <Button className="w-full" size="lg" variant="outline" onClick={() => navigate("/student/dashboard")}>
              Continue to dashboard
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}
