import { useMutation, useQuery } from "@tanstack/react-query";
import {
  ArrowLeft,
  ChevronLeft,
  ChevronRight,
  Filter,
  Search,
} from "lucide-react";
import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Input } from "../../components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../components/ui/table";
import { fetchClient, fetchConsents, revokeConsent } from "../../lib/devApi";

function ClientConsentsPage() {
  const params = useParams();
  const clientId = params.id ?? "";
  const [subjectInput, setSubjectInput] = useState("");
  const [subject, setSubject] = useState("");
  const { data: clientData } = useQuery({
    queryKey: ["client", clientId],
    queryFn: () => fetchClient(clientId),
    enabled: clientId.length > 0,
  });
  const {
    data: consentsData,
    isLoading,
    error,
    refetch,
  } = useQuery({
    queryKey: ["consents", clientId, subject],
    queryFn: () => fetchConsents(subject, clientId),
    enabled: subject.length > 0,
  });
  const revokeMutation = useMutation({
    mutationFn: (payload: { subject: string }) =>
      revokeConsent(payload.subject, clientId),
    onSuccess: () => {
      refetch();
    },
  });

  const rows = consentsData?.items ?? [];

  return (
    <div className="space-y-8">
      <header className="space-y-4">
        <div className="flex flex-wrap justify-between gap-4">
          <div className="space-y-2">
            <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
              <Link to="/" className="hover:text-primary">
                Home
              </Link>
              <span>/</span>
              <Link to="/clients" className="hover:text-primary">
                Clients
              </Link>
              <span>/</span>
              <span>{clientData?.client?.name || clientId}</span>
              <span>/</span>
              <span className="text-foreground font-semibold">
                User Consent Grants
              </span>
            </nav>
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="icon" asChild>
                <Link to={`/clients/${clientId}`}>
                  <ArrowLeft className="h-4 w-4" />
                </Link>
              </Button>
              <div>
                <p className="text-3xl font-black leading-tight">
                  User Consent Grants
                </p>
                <p className="text-muted-foreground">
                  OIDC Relying Party 사용자 권한을 검토·관리합니다.
                </p>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <Badge
              variant={
                clientData?.client?.status === "active" ? "success" : "muted"
              }
            >
              {clientData?.client?.status === "active" ? "Active" : "Inactive"}
            </Badge>
          </div>
        </div>
        <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
          <Link
            to={`/clients/${clientId}`}
            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
          >
            Connection
          </Link>
          <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
            Consent &amp; Users
          </span>
          <Link
            to={`/clients/${clientId}/settings`}
            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
          >
            Settings
          </Link>
        </div>
      </header>

      <Card className="glass-panel">
        <CardContent className="flex flex-wrap items-center justify-between gap-4">
          <div className="flex flex-wrap items-center gap-4 flex-1">
            <div className="relative w-full max-w-md">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                className="pl-10"
                placeholder="사용자 ID, 이름, 이메일로 검색"
                value={subjectInput}
                onChange={(e) => setSubjectInput(e.target.value)}
              />
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
                Status:
              </span>
              <select className="h-10 rounded-lg border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30">
                <option>All Statuses</option>
                <option selected>Active</option>
                <option>Revoked</option>
              </select>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <Button variant="ghost" className="gap-1 text-muted-foreground">
              <Filter className="h-4 w-4" />
              Advanced Filters
            </Button>
            <Button
              className="shadow-sm shadow-primary/30"
              onClick={() => setSubject(subjectInput.trim())}
            >
              검색
            </Button>
            <Button className="shadow-sm shadow-primary/30">Export CSV</Button>
          </div>
        </CardContent>
      </Card>

      <Card className="glass-panel">
        {error && (
          <CardContent className="text-sm text-red-500">
            Error loading consents: {(error as Error).message}
          </CardContent>
        )}
        {isLoading && (
          <CardContent className="text-sm text-muted-foreground">
            Loading consents...
          </CardContent>
        )}
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>User</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Granted Scopes</TableHead>
              <TableHead>Last Authenticated</TableHead>
              <TableHead className="text-right">Action</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={`${row.subject}-${row.clientId}`}>
                <TableCell>
                  <div className="flex items-center gap-3">
                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
                      {row.subject.slice(0, 2).toUpperCase()}
                    </div>
                    <div className="flex flex-col">
                      <span className="text-sm font-semibold">
                        {row.clientName || "Subject"}
                      </span>
                      <span className="text-xs text-muted-foreground">
                        {row.subject}
                      </span>
                    </div>
                  </div>
                </TableCell>
                <TableCell>
                  <Badge variant="success">Active</Badge>
                </TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {row.grantedScopes.map((scope) => (
                      <Badge
                        key={scope}
                        variant="muted"
                        className="border bg-muted/40 text-foreground"
                      >
                        {scope}
                      </Badge>
                    ))}
                  </div>
                </TableCell>
                <TableCell className="text-sm text-muted-foreground">
                  {row.authenticatedAt || "-"}
                </TableCell>
                <TableCell className="text-right">
                  <Button
                    variant="ghost"
                    className="text-destructive"
                    onClick={() =>
                      revokeMutation.mutate({ subject: row.subject })
                    }
                  >
                    Revoke
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <CardContent className="flex items-center justify-between border-t border-border bg-muted/10 px-6 py-4 text-sm text-muted-foreground">
          <p>
            Showing <span className="font-semibold text-foreground">1</span> to{" "}
            <span className="font-semibold text-foreground">4</span> of{" "}
            <span className="font-semibold text-foreground">1,250</span> users
          </p>
          <div className="flex gap-2">
            <Button variant="outline" size="icon" disabled>
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <Button size="sm">1</Button>
            <Button variant="ghost" size="sm">
              2
            </Button>
            <Button variant="ghost" size="sm">
              3
            </Button>
            <Button variant="outline" size="icon">
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-6 md:grid-cols-3">
        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
              Active Grants
            </p>
            <CardTitle className="text-2xl font-black">1,250</CardTitle>
          </CardHeader>
        </Card>
        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
              Total Scopes Issued
            </p>
            <CardTitle className="text-2xl font-black">4,812</CardTitle>
          </CardHeader>
        </Card>
        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
              Avg. Scopes per User
            </p>
            <CardTitle className="text-2xl font-black">3.8</CardTitle>
          </CardHeader>
        </Card>
      </div>
    </div>
  );
}

export default ClientConsentsPage;