import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { AlertCircle, Copy, Eye, Link2, Shield, Workflow, Save } 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, CardHeader, CardTitle, CardDescription } from "../../components/ui/card";
import { Separator } from "../../components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableRow,
} from "../../components/ui/table";
import { Textarea } from "../../components/ui/textarea";
import { Label } from "../../components/ui/label";
import { fetchClient, updateClient } from "../../lib/devApi";
import { useState, useEffect } from "react";

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

  const [redirectUris, setRedirectUris] = useState("");

  useEffect(() => {
    if (data?.client?.redirectUris) {
      setRedirectUris(data.client.redirectUris.join(", "));
    }
  }, [data]);

  const mutation = useMutation({
    mutationFn: () => {
      const uriList = redirectUris
        .split(",")
        .map((u) => u.trim())
        .filter(Boolean);
      return updateClient(clientId, { redirectUris: uriList });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["client", clientId] });
      alert("Redirect URIs가 저장되었습니다.");
    },
    onError: (err) => {
      alert(`저장 실패: ${(err as Error).message}`);
    },
  });

  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"
          >
            Connection
          </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>
          <Link
            to={`/clients/${clientId}/federation`}
            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
          >
            Federation
          </Link>
        </div>
      </div>

      <div className="grid gap-8 lg:grid-cols-2">
        <div className="space-y-6">
          <div className="space-y-4">
            <h2 className="text-xl font-bold">클라이언트 자격 증명</h2>
            <Card className="glass-panel">
              <CardContent className="flex flex-col gap-4 p-6">
                <div>
                  <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                    Client ID
                  </p>
                  <div className="flex items-center justify-between gap-2">
                    <p className="font-mono text-lg truncate">{data.client.id}</p>
                    <Button variant="secondary" size="icon" className="shrink-0" onClick={() => navigator.clipboard.writeText(data.client.id)}>
                      <Copy className="h-4 w-4" />
                    </Button>
                  </div>
                </div>

                <Separator />

                <div>
                  <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                    Client Secret
                  </p>
                  <div className="flex items-center justify-between gap-2">
                    <p className="font-mono text-lg tracking-widest">••••••••••••••••</p>
                    <div className="flex gap-2 shrink-0">
                      <Button variant="secondary" size="icon">
                        <Eye className="h-4 w-4" />
                      </Button>
                      <Button variant="outline" size="icon" className="border-amber-500/50 text-amber-500">
                        <AlertCircle className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </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 shrink-0"
                          onClick={() => navigator.clipboard.writeText(endpoint.value)}
                        >
                          <Copy className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Card>
          </div>
        </div>

        <div className="space-y-6">
          <div className="space-y-4">
            <h2 className="text-xl font-bold">리디렉션 URI 설정</h2>
            <Card className="glass-panel border-primary/20">
              <CardHeader>
                <CardTitle className="text-lg">Redirect URIs</CardTitle>
                <CardDescription>
                  인증 성공 후 사용자를 리다이렉트할 허용된 URL 목록입니다. 콤마(,)로 구분하여 여러 개 입력할 수 있습니다.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="redirect-uris" className="text-sm font-semibold">인증 콜백 URL</Label>
                  <Textarea
                    id="redirect-uris"
                    placeholder="https://your-app.com/callback, http://localhost:3000/auth/callback"
                    rows={5}
                    value={redirectUris}
                    onChange={(e) => setRedirectUris(e.target.value)}
                    className="font-mono text-sm"
                  />
                </div>
                <Button 
                  className="w-full gap-2" 
                  onClick={() => mutation.mutate()}
                  disabled={mutation.isPending}
                >
                  <Save className="h-4 w-4" />
                  {mutation.isPending ? "저장 중..." : "Redirect URIs 저장"}
                </Button>
              </CardContent>
            </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>
            <Separator className="my-4" />
            <p className="text-sm text-muted-foreground">
              비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을
              권장합니다.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ClientDetailsPage;