import { useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { AlertCircle, Copy, Eye, Link2, Shield, Workflow } from "lucide-react";
import { Link, useParams } from "react-router-dom";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import { Card, CardContent } from "../../components/ui/card";
import { Separator } from "../../components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableRow,
} from "../../components/ui/table";
import { fetchClient } from "../../lib/devApi";

function ClientDetailsPage() {
  const params = useParams();
  const clientId = params.id ?? "";
  const { data, isLoading, error } = useQuery({
    queryKey: ["client", clientId],
    queryFn: () => fetchClient(clientId),
    enabled: clientId.length > 0,
  });

  if (!clientId) {
    return <div className="p-8 text-center">Client ID가 필요합니다.</div>;
  }

  if (isLoading) {
    return <div className="p-8 text-center">Loading client...</div>;
  }

  if (error || !data) {
    const errMsg =
      (error as AxiosError<{ error?: string }>).response?.data?.error ??
      (error as Error)?.message;
    return (
      <div className="p-8 text-center text-red-500">
        Error loading client: {errMsg || "unknown error"}
      </div>
    );
  }

  const endpoints = [
    { label: "Discovery Endpoint", value: data.endpoints.discovery },
    { label: "Issuer URL", value: data.endpoints.issuer },
    { label: "Authorization Endpoint", value: data.endpoints.authorization },
    { label: "Token Endpoint", value: data.endpoints.token },
    { label: "UserInfo Endpoint", value: data.endpoints.userinfo },
  ];

  return (
    <div className="space-y-8">
      <div className="space-y-3">
        <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
          <Link to="/clients" className="text-primary hover:underline">
            Relying Parties
          </Link>
          <span>/</span>
          <span className="text-foreground">클라이언트 상세</span>
        </div>
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <h1 className="text-4xl font-black leading-tight tracking-tight">
              {data.client.name || data.client.id}
            </h1>
            <p className="text-muted-foreground">
              OIDC 자격 증명과 엔드포인트를 관리합니다.
            </p>
          </div>
          <Badge
            variant={data.client.status === "active" ? "success" : "muted"}
            className="px-3 py-1 text-xs uppercase"
          >
            {data.client.status === "active" ? "Active" : "Inactive"}
          </Badge>
        </div>
        <div className="flex gap-6 border-b border-border">
          <Link
            to={`/clients/${clientId}`}
            className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
          >
            Overview
          </Link>
          <Link
            to={`/clients/${clientId}/consents`}
            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
          >
            Consent &amp; Users
          </Link>
          <Link
            to={`/clients/${clientId}/settings`}
            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
          >
            Settings
          </Link>
        </div>
      </div>

      <div className="space-y-4">
        <h2 className="text-xl font-bold">클라이언트 자격 증명</h2>
        <Card className="glass-panel">
          <CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                Client ID
              </p>
              <p className="font-mono text-lg">{data.client.id}</p>
            </div>
            <Button variant="secondary" className="gap-2">
              <Copy className="h-4 w-4" />
              ID 복사
            </Button>
          </CardContent>
        </Card>

        <Card className="glass-panel">
          <CardContent className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
              <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                Client Secret
              </p>
              <p className="font-mono text-lg tracking-widest">
                ••••••••••••••••
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button variant="secondary" className="gap-2">
                <Eye className="h-4 w-4" />
                보기
              </Button>
              <Button variant="secondary" className="gap-2">
                <Copy className="h-4 w-4" />
                복사
              </Button>
              <Button
                variant="outline"
                className="gap-2 border-amber-500/50 text-amber-500"
              >
                <AlertCircle className="h-4 w-4" />
                비밀키 재발행
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <h2 className="text-xl font-bold">OIDC 엔드포인트</h2>
          <Badge variant="muted" className="gap-1">
            <Link2 className="h-3 w-3" />
            읽기 전용
          </Badge>
        </div>
        <Card className="glass-panel">
          <Table>
            <TableBody>
              {endpoints.map((endpoint) => (
                <TableRow key={endpoint.label} className="border-border/70">
                  <TableCell className="w-1/3">
                    <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
                      {endpoint.label}
                    </p>
                  </TableCell>
                  <TableCell className="flex items-center justify-between gap-3">
                    <span className="break-all font-mono text-sm">
                      {endpoint.value}
                    </span>
                    <Button
                      variant="secondary"
                      size="icon"
                      className="h-8 w-8"
                      aria-label={`${endpoint.label} 복사`}
                    >
                      <Copy className="h-4 w-4" />
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </Card>
      </div>

      <div className="glass-panel p-6 opacity-80">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/15 text-primary">
              <Shield className="h-6 w-6" />
            </div>
            <div>
              <p className="text-lg font-semibold">보안 메모</p>
              <p className="text-sm text-muted-foreground">
                엔드포인트는 읽기 전용으로 유지하고, 비밀키 재발행/복사는 감사
                로그와 연계하세요.
              </p>
            </div>
          </div>
          <div className="hidden items-center gap-2 md:flex">
            <Badge variant="outline" className="gap-1">
              <Workflow className="h-4 w-4" />
              감사 이벤트 필요
            </Badge>
          </div>
        </div>
        <Separator className="my-4" />
        <p className="text-sm text-muted-foreground">
          비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을
          권장합니다.
        </p>
      </div>
    </div>
  );
}

export default ClientDetailsPage;
