import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { useAuth } from "@/hooks/use-auth";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { toast } from "sonner";
import {
  ArrowLeft,
  Search,
  GraduationCap,
  ShieldCheck,
  Phone,
  CalendarPlus,
} from "lucide-react";

const TRADES = [
  "Carpentry",
  "Tailoring",
  "Welding",
  "Catering",
  "Coding",
  "Electrical",
  "Plumbing",
  "Hairdressing",
];

export const Route = createFileRoute("/_authenticated/trainers")({
  head: () => ({ meta: [{ title: "Find trainers · SkillKonnect" }] }),
  component: TrainersPage,
});

type Trainer = {
  id: string;
  full_name: string | null;
  organization: string | null;
  bio: string | null;
  phone: string | null;
  status: "pending" | "active" | "suspended";
};

function TrainersPage() {
  const { hasRole, loading } = useAuth();
  const navigate = useNavigate();
  const [trainers, setTrainers] = useState<Trainer[] | null>(null);
  const [query, setQuery] = useState("");
  const [trade, setTrade] = useState<string>("any");
  const [onlyApproved, setOnlyApproved] = useState(true);

  useEffect(() => {
    void load();
  }, []);

  async function load() {
    const { data: roleRows, error: rolesErr } = await supabase
      .from("user_roles")
      .select("user_id")
      .eq("role", "trainer");
    if (rolesErr) {
      toast.error(rolesErr.message);
      return;
    }
    const ids = (roleRows ?? []).map((r) => r.user_id);
    if (ids.length === 0) {
      setTrainers([]);
      return;
    }
    const { data, error } = await supabase
      .from("profiles")
      .select("id, full_name, organization, bio, phone, status")
      .in("id", ids);
    if (error) {
      toast.error(error.message);
      return;
    }
    setTrainers(data as Trainer[]);
  }

  const filtered = useMemo(() => {
    if (!trainers) return [];
    const q = query.trim().toLowerCase();
    return trainers
      .filter((t) => (onlyApproved ? t.status === "active" : true))
      .filter((t) => {
        if (!q) return true;
        return [t.full_name, t.organization, t.bio]
          .filter(Boolean)
          .some((v) => v!.toLowerCase().includes(q));
      })
      .filter((t) => {
        if (trade === "any") return true;
        return (t.bio ?? "").toLowerCase().includes(trade.toLowerCase());
      })
      .sort((a, b) => {
        if (a.status === b.status) return (a.full_name ?? "").localeCompare(b.full_name ?? "");
        if (a.status === "active") return -1;
        if (b.status === "active") return 1;
        return 0;
      });
  }, [trainers, query, trade, onlyApproved]);

  if (!loading && !hasRole("school") && !hasRole("admin")) {
    return (
      <div className="container-prose py-16 text-center">
        <p className="text-muted-foreground">Only schools can browse trainers.</p>
        <Button asChild variant="link">
          <Link to="/dashboard">Back to dashboard</Link>
        </Button>
      </div>
    );
  }

  function bookTrainer(t: Trainer) {
    const search: Record<string, string> = { trainer: t.id };
    if (trade !== "any") search.trade = trade;
    navigate({ to: "/bookings/new", search });
  }

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-30 backdrop-blur bg-background/80 border-b border-border/60">
        <div className="max-w-5xl mx-auto flex h-16 items-center gap-3 px-4 sm:px-6">
          <Button asChild variant="ghost" size="sm" className="gap-1.5">
            <Link to="/dashboard">
              <ArrowLeft className="h-4 w-4" />
              <span className="hidden sm:inline">Dashboard</span>
            </Link>
          </Button>
          <div className="flex items-center gap-2">
            <GraduationCap className="h-5 w-5 text-primary" />
            <h1 className="font-semibold">Find trainers</h1>
          </div>
        </div>
      </header>

      <main className="max-w-5xl w-full mx-auto px-4 sm:px-6 py-8 space-y-6">
        <Card className="border-border/60">
          <CardHeader className="pb-3">
            <CardTitle className="text-base">Search verified skill professionals</CardTitle>
            <CardDescription>
              Filter by trade, then send a booking request to host them at your school.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="grid sm:grid-cols-[1fr_200px] gap-3">
              <div className="relative">
                <Search className="h-4 w-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
                <Input
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Search by name, organization or bio"
                  className="pl-9"
                />
              </div>
              <Select value={trade} onValueChange={setTrade}>
                <SelectTrigger>
                  <SelectValue placeholder="Any trade" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="any">Any trade</SelectItem>
                  {TRADES.map((t) => (
                    <SelectItem key={t} value={t}>
                      {t}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none">
              <input
                type="checkbox"
                checked={onlyApproved}
                onChange={(e) => setOnlyApproved(e.target.checked)}
                className="h-4 w-4 rounded border-border accent-primary"
              />
              Only show approved trainers
            </label>
          </CardContent>
        </Card>

        {trainers === null && (
          <p className="text-sm text-muted-foreground">Loading trainers…</p>
        )}
        {trainers !== null && filtered.length === 0 && (
          <Card className="border-border/60">
            <CardContent className="py-12 text-center text-sm text-muted-foreground">
              No trainers match your search.
            </CardContent>
          </Card>
        )}

        <div className="grid sm:grid-cols-2 gap-4">
          {filtered.map((t) => (
            <TrainerCard key={t.id} trainer={t} onBook={() => bookTrainer(t)} />
          ))}
        </div>
      </main>
    </div>
  );
}

function TrainerCard({ trainer, onBook }: { trainer: Trainer; onBook: () => void }) {
  const initials =
    (trainer.full_name ?? "?")
      .split(" ")
      .map((s) => s[0])
      .join("")
      .slice(0, 2)
      .toUpperCase() || "?";
  return (
    <Card className="border-border/60 flex flex-col">
      <CardContent className="pt-5 flex-1 space-y-3">
        <div className="flex items-start gap-3">
          <div className="h-12 w-12 rounded-full bg-primary/10 text-primary flex items-center justify-center font-semibold shrink-0">
            {initials}
          </div>
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              <span className="font-semibold truncate">
                {trainer.full_name || "Unnamed trainer"}
              </span>
              {trainer.status === "active" ? (
                <Badge className="bg-success text-success-foreground gap-1">
                  <ShieldCheck className="h-3 w-3" /> Verified
                </Badge>
              ) : trainer.status === "pending" ? (
                <Badge variant="secondary">Pending verification</Badge>
              ) : (
                <Badge variant="destructive">Suspended</Badge>
              )}
            </div>
            {trainer.organization && (
              <div className="text-sm text-muted-foreground truncate">
                {trainer.organization}
              </div>
            )}
            {trainer.phone && (
              <div className="text-xs text-muted-foreground mt-1 inline-flex items-center gap-1">
                <Phone className="h-3 w-3" />
                {trainer.phone}
              </div>
            )}
          </div>
        </div>
        {trainer.bio && (
          <p className="text-sm text-muted-foreground line-clamp-3">{trainer.bio}</p>
        )}
      </CardContent>
      <div className="p-4 pt-0">
        <Button
          onClick={onBook}
          disabled={trainer.status !== "active"}
          className="w-full gap-2"
        >
          <CalendarPlus className="h-4 w-4" />
          {trainer.status === "active" ? "Book training" : "Not bookable"}
        </Button>
      </div>
    </Card>
  );
}