import { AlertCircle, Copy, Eye, Link2, Shield, Workflow } from "lucide-react";
import { Link } 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";

const endpoints = [
  {
    label: "Discovery Endpoint",
    value: "https://auth.acme-idp.com/.well-known/openid-configuration",
  },
  { label: "Issuer URL", value: "https://auth.acme-idp.com/" },
  {
    label: "Authorization Endpoint",
    value: "https://auth.acme-idp.com/oauth2/authorize",
  },
  { label: "Token Endpoint", value: "https://auth.acme-idp.com/oauth2/token" },
  {
    label: "UserInfo Endpoint",
    value: "https://auth.acme-idp.com/oauth2/userinfo",
  },
];

function ClientDetailsPage() {
  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">
              Developer Portal App
            </h1>
            <p className="text-muted-foreground">
              OIDC 자격 증명과 엔드포인트를 관리합니다.
            </p>
          </div>
          <Badge variant="success" className="px-3 py-1 text-xs uppercase">
            Active
          </Badge>
        </div>
        <div className="flex gap-6 border-b border-border">
          <Link
            to="/clients/cli_481...8k2"
            className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
          >
            Overview
          </Link>
          <Link
            to="/clients/cli_481...8k2/consents"
            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
          >
            Consent &amp; Users
          </Link>
          <Link
            to="/clients/cli_481...8k2/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">721948305612-oidc-client-prod</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;