import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {
  ArrowLeft,
  Eye,
  EyeOff,
  Link2,
  RefreshCw,
  Save,
  Shield,
} from "lucide-react";
import { useEffect, 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 { CopyButton } from "../../components/ui/copy-button";
import { Label } from "../../components/ui/label";
import { Separator } from "../../components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableRow,
} from "../../components/ui/table";
import { Textarea } from "../../components/ui/textarea";
import { toast } from "../../components/ui/use-toast";
import {
  fetchClient,
  rotateClientSecret,
  updateClient,
} from "../../lib/devApi";
import { t } from "../../lib/i18n";
import { cn } from "../../lib/utils";

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("");
  const [showSecret, setShowSecret] = useState(false);

  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] });
      toast(
        t(
          "msg.dev.clients.details.redirect_saved",
          "Redirect URIs가 저장되었습니다.",
        ),
      );
    },
    onError: (err) => {
      toast(
        t("msg.dev.clients.details.save_error", "저장 실패: {{error}}", {
          error: (err as Error).message,
        }),
        "error",
      );
    },
  });

  const rotateMutation = useMutation({
    mutationFn: () => rotateClientSecret(clientId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["client", clientId] });
      toast(
        t(
          "msg.dev.clients.details.secret_rotated",
          "Client Secret이 재발급되었습니다.",
        ),
      );
      setShowSecret(true); // 재발급 후 바로 보여줌
    },
    onError: (err) => {
      toast(
        t("msg.dev.clients.details.rotate_error", "재발급 실패: {{error}}", {
          error: (err as Error).message,
        }),
        "error",
      );
    },
  });

  const handleRotateSecret = () => {
    if (
      window.confirm(
        t(
          "msg.dev.clients.details.rotate_confirm",
          "경고: Client Secret을 재발급하면 기존 시크릿은 즉시 무효화됩니다.\n연동된 애플리케이션이 중단될 수 있습니다. 계속하시겠습니까?",
        ),
      )
    ) {
      rotateMutation.mutate();
    }
  };

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

  if (isLoading) {
    return (
      <div className="p-8 text-center">
        {t("msg.dev.clients.details.loading", "Loading app...")}
      </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">
        {t(
          "msg.dev.clients.details.load_error",
          "Error loading app: {{error}}",
          { error: errMsg || t("msg.common.unknown_error", "unknown error") },
        )}
      </div>
    );
  }

  const endpoints = [
    {
      labelKey: "ui.dev.clients.details.endpoint.discovery",
      labelFallback: "Discovery Endpoint",
      value: data.endpoints.discovery,
    },
    {
      labelKey: "ui.dev.clients.details.endpoint.issuer",
      labelFallback: "Issuer URL",
      value: data.endpoints.issuer,
    },
    {
      labelKey: "ui.dev.clients.details.endpoint.authorization",
      labelFallback: "Authorization Endpoint",
      value: data.endpoints.authorization,
    },
    {
      labelKey: "ui.dev.clients.details.endpoint.token",
      labelFallback: "Token Endpoint",
      value: data.endpoints.token,
    },
    {
      labelKey: "ui.dev.clients.details.endpoint.userinfo",
      labelFallback: "UserInfo Endpoint",
      value: data.endpoints.userinfo,
    },
  ];

  // Client Secret from API
  const secretPlaceholder = "SECRET_NOT_AVAILABLE";
  const clientSecret = data.client.clientSecret || secretPlaceholder;
  const displaySecret =
    clientSecret === secretPlaceholder
      ? t("msg.dev.clients.details.secret_unavailable", "SECRET_NOT_AVAILABLE")
      : clientSecret;

  return (
    <div className="space-y-8">
      <div className="space-y-3">
        <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
          <Link to="/" className="hover:text-primary">
            {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
          </Link>
          <span>/</span>
          <Link to="/clients" className="hover:text-primary">
            {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
          </Link>
          <span>/</span>
          <span>{data.client.name || clientId}</span>
          <span>/</span>
          <span className="text-foreground font-semibold">
            {t("ui.dev.clients.details.tab.connection", "Federation")}
          </span>
        </nav>
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" asChild>
              <Link to="/clients">
                <ArrowLeft className="h-4 w-4" />
              </Link>
            </Button>
            <div>
              <h1 className="text-4xl font-black leading-tight tracking-tight">
                {data.client.name || data.client.id}
              </h1>
              <p className="text-muted-foreground">
                {t(
                  "msg.dev.clients.details.subtitle",
                  "Manage OIDC credentials and endpoints.",
                )}
              </p>
            </div>
          </div>
          <Badge
            variant={data.client.status === "active" ? "info" : "muted"}
            className="px-3 py-1 text-xs uppercase"
          >
            {data.client.status === "active"
              ? t("ui.common.status.active", "Active")
              : t("ui.common.status.inactive", "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"
          >
            {t("ui.dev.clients.details.tab.connection", "Federation")}
          </Link>
          <Link
            to={`/clients/${clientId}/consents`}
            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
          >
            {t("ui.dev.clients.details.tab.consents", "Consent & Users")}
          </Link>
          <Link
            to={`/clients/${clientId}/settings`}
            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
          >
            {t("ui.dev.clients.details.tab.settings", "Settings")}
          </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">
              {t(
                "ui.dev.clients.details.credentials.title",
                "Client Credentials",
              )}
            </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">
                    {t(
                      "ui.dev.clients.details.credentials.client_id",
                      "Client ID",
                    )}
                  </p>
                  <div className="flex items-center justify-between gap-2">
                    <p className="font-mono text-lg truncate">
                      {data.client.id}
                    </p>
                    <CopyButton
                      value={data.client.id}
                      onCopy={() =>
                        toast(
                          t(
                            "msg.dev.clients.details.copy_client_id",
                            "Client ID가 복사되었습니다.",
                          ),
                        )
                      }
                    />
                  </div>
                </div>

                <Separator />

                <div>
                  <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                    {t(
                      "ui.dev.clients.details.credentials.client_secret",
                      "Client Secret",
                    )}
                  </p>
                  <div className="flex items-center justify-between gap-2">
                    <p
                      className={cn(
                        "font-mono text-lg",
                        !showSecret && "tracking-widest",
                      )}
                    >
                      {showSecret ? displaySecret : "••••••••••••••••"}
                    </p>
                    <div className="flex gap-2 shrink-0">
                      <Button
                        variant="secondary"
                        size="icon"
                        onClick={() => setShowSecret(!showSecret)}
                        aria-label={
                          showSecret
                            ? t(
                                "ui.dev.clients.details.secret.hide",
                                "비밀키 숨기기",
                              )
                            : t(
                                "ui.dev.clients.details.secret.show",
                                "비밀키 보기",
                              )
                        }
                      >
                        {showSecret ? (
                          <EyeOff className="h-4 w-4" />
                        ) : (
                          <Eye className="h-4 w-4" />
                        )}
                      </Button>
                      <Button
                        variant="secondary"
                        size="icon"
                        onClick={handleRotateSecret}
                        disabled={rotateMutation.isPending}
                        title={t(
                          "ui.dev.clients.details.secret.rotate",
                          "비밀키 재발급 (Rotate)",
                        )}
                      >
                        <RefreshCw
                          className={cn(
                            "h-4 w-4",
                            rotateMutation.isPending && "animate-spin",
                          )}
                        />
                      </Button>
                      <CopyButton
                        value={clientSecret}
                        disabled={
                          !showSecret && clientSecret === secretPlaceholder
                        }
                        onCopy={() =>
                          toast(
                            t(
                              "msg.dev.clients.details.copy_client_secret",
                              "Client Secret이 복사되었습니다.",
                            ),
                          )
                        }
                      />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="space-y-4">
            <div className="flex items-center gap-2">
              <h2 className="text-xl font-bold">
                {t("ui.dev.clients.details.endpoints.title", "OIDC 엔드포인트")}
              </h2>
              <Badge variant="muted" className="gap-1">
                <Link2 className="h-3 w-3" />
                {t("ui.dev.clients.details.endpoints.read_only", "읽기 전용")}
              </Badge>
            </div>
            <Card className="glass-panel">
              <Table>
                <TableBody>
                  {endpoints.map((endpoint) => (
                    <TableRow
                      key={endpoint.labelKey}
                      className="border-border/70"
                    >
                      <TableCell className="w-1/3">
                        <p className="text-xs font-bold uppercase tracking-[0.12em] text-muted-foreground">
                          {t(endpoint.labelKey, endpoint.labelFallback)}
                        </p>
                      </TableCell>
                      <TableCell className="flex items-center justify-between gap-3">
                        <span className="break-all font-mono text-sm">
                          {endpoint.value}
                        </span>
                        <CopyButton
                          value={endpoint.value}
                          className="h-8 w-8 shrink-0"
                          onCopy={() =>
                            toast(
                              t(
                                "msg.dev.clients.details.copy_endpoint",
                                "{{label}}가 복사되었습니다.",
                                {
                                  label: t(
                                    endpoint.labelKey,
                                    endpoint.labelFallback,
                                  ),
                                },
                              ),
                            )
                          }
                        />
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Card>
          </div>
        </div>

        <div className="space-y-6">
          <div className="space-y-4">
            <h2 className="text-xl font-bold">
              {t("ui.dev.clients.details.redirect.title", "리디렉션 URI 설정")}
            </h2>
            <Card className="glass-panel border-primary/20">
              <CardHeader>
                <CardTitle className="text-lg">
                  {t("ui.dev.clients.details.redirect.label", "Redirect URIs")}
                </CardTitle>
                <CardDescription>
                  {t(
                    "msg.dev.clients.details.redirect.description",
                    "인증 성공 후 사용자를 리다이렉트할 허용된 URL 목록입니다. 콤마(,)로 구분하여 여러 개 입력할 수 있습니다.",
                  )}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label
                    htmlFor="redirect-uris"
                    className="text-sm font-semibold"
                  >
                    {t(
                      "ui.dev.clients.details.redirect.callback_label",
                      "인증 콜백 URL",
                    )}
                  </Label>
                  <Textarea
                    id="redirect-uris"
                    placeholder={t(
                      "ui.dev.clients.details.redirect.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
                    ? t("msg.common.saving", "저장 중...")
                    : t(
                        "ui.dev.clients.details.redirect.save",
                        "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">
                    {t("ui.dev.clients.details.security.title", "보안 메모")}
                  </p>
                  <p className="text-sm text-muted-foreground">
                    {t(
                      "msg.dev.clients.details.security.note",
                      "엔드포인트는 읽기 전용으로 유지하고, 비밀키 재발행/복사는 감사 로그와 연계하세요.",
                    )}
                  </p>
                </div>
              </div>
            </div>
            <Separator className="my-4" />
            <p className="text-sm text-muted-foreground">
              {t(
                "msg.dev.clients.details.security.footer",
                "비밀키 재발행 작업에는 관리자 세션 TTL 확인과 레이트리밋, 알림 연동을 권장합니다.",
              )}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ClientDetailsPage;