baron-sso/adminfront/src/features/relying-parties/RelyingPartyCreatePage.tsx

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { ArrowLeft, Save } from "lucide-react";
import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import {
  createRelyingParty,
  fetchTenants,
} from "../../lib/adminApi";
import type { HydraClientReq } from "../../lib/adminApi";
import { Badge } from "../../components/ui/badge";

function RelyingPartyCreatePage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const [selectedTenantId, setSelectedTenantId] = useState("");
  const [formData, setFormData] = useState<HydraClientReq>({
    client_name: "",
    redirect_uris: [],
    scope: "openid profile email",
    grant_types: ["authorization_code", "refresh_token"],
    response_types: ["code"],
    token_endpoint_auth_method: "client_secret_basic",
  });
  const [redirectUriInput, setRedirectUriInput] = useState("");

  // 테넌트 목록 조회 (선택용)
  const { data: tenantsData } = useQuery({
    queryKey: ["tenants", { limit: 100 }],
    queryFn: () => fetchTenants(100, 0),
  });
  const tenants = tenantsData?.items ?? [];

  const createMutation = useMutation({
    mutationFn: (data: HydraClientReq) => createRelyingParty(selectedTenantId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["relyingParties"] });
      navigate("/relying-parties");
    },
  });

  const errorMsg = (createMutation.error as AxiosError<{ error?: string }>)
    ?.response?.data?.error;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedTenantId) {
      alert("소속될 테넌트를 선택해주세요.");
      return;
    }
    createMutation.mutate(formData);
  };

  const addRedirectUri = () => {
    if (!redirectUriInput.trim()) return;
    setFormData((prev) => ({
      ...prev,
      redirect_uris: [...prev.redirect_uris, redirectUriInput.trim()],
    }));
    setRedirectUriInput("");
  };

  const removeRedirectUri = (index: number) => {
    setFormData((prev) => ({
      ...prev,
      redirect_uris: prev.redirect_uris.filter((_, i) => i !== index),
    }));
  };

  return (
    <div className="space-y-8">
      <header className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-2">
          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
            <Link to="/relying-parties" className="inline-flex items-center gap-2">
              <ArrowLeft size={14} />
              Applications
            </Link>
            <span>/</span>
            <span className="text-foreground">New App</span>
          </div>
          <h2 className="text-3xl font-semibold">새 애플리케이션 등록</h2>
          <p className="text-sm text-[var(--color-muted)]">
            전체 시스템 차원에서 새로운 Relying Party를 등록합니다.
          </p>
        </div>
      </header>

      <form onSubmit={handleSubmit} className="max-w-2xl">
        <Card className="bg-[var(--color-panel)]">
          <CardHeader>
            <CardTitle>App & Tenant Assignment</CardTitle>
            <CardDescription>
              애플리케이션이 소속될 테넌트와 기본 정보를 설정합니다.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            {errorMsg && (
              <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
                {errorMsg}
              </div>
            )}

            {/* 테넌트 선택 추가 */}
            <div className="space-y-1">
              <Label htmlFor="tenant_select">Owner Tenant</Label>
              <select 
                id="tenant_select"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                value={selectedTenantId}
                onChange={(e) => setSelectedTenantId(e.target.value)}
                required
              >
                <option value="">-- 테넌트 선택 --</option>
                {tenants.map(t => (
                    <option key={t.id} value={t.id}>{t.name} ({t.slug})</option>
                ))}
              </select>
              <p className="text-xs text-muted-foreground">이 앱을 관리할 조직을 선택하세요.</p>
            </div>

            <div className="space-y-1">
              <Label htmlFor="client_name">Client Name</Label>
              <Input
                id="client_name"
                value={formData.client_name}
                onChange={(e) =>
                  setFormData({ ...formData, client_name: e.target.value })
                }
                placeholder="My Awesome App"
                required
              />
            </div>

            <div className="space-y-1">
              <Label>Redirect URIs</Label>
              <div className="flex gap-2">
                <Input
                  value={redirectUriInput}
                  onChange={(e) => setRedirectUriInput(e.target.value)}
                  placeholder="https://myapp.com/callback"
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      e.preventDefault();
                      addRedirectUri();
                    }
                  }}
                />
                <Button type="button" variant="secondary" onClick={addRedirectUri}>
                  Add
                </Button>
              </div>
              <div className="mt-2 flex flex-wrap gap-2">
                {formData.redirect_uris.map((uri, idx) => (
                  <Badge key={idx} variant="secondary" className="gap-1 pr-1">
                    {uri}
                    <button
                      type="button"
                      onClick={() => removeRedirectUri(idx)}
                      className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20"
                    >
                      &times;
                    </button>
                  </Badge>
                ))}
              </div>
            </div>

            <div className="space-y-1">
              <Label htmlFor="scope">Scope</Label>
              <Input
                id="scope"
                value={formData.scope}
                onChange={(e) =>
                  setFormData({ ...formData, scope: e.target.value })
                }
                placeholder="openid profile email"
              />
            </div>
            
            <div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                    <Label>Auth Method</Label>
                    <select 
                        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                        value={formData.token_endpoint_auth_method}
                        onChange={(e) => setFormData({...formData, token_endpoint_auth_method: e.target.value})}
                    >
                        <option value="client_secret_basic">client_secret_basic</option>
                        <option value="client_secret_post">client_secret_post</option>
                        <option value="none">none (Public Client)</option>
                    </select>
                </div>
            </div>

          </CardContent>
          <CardFooter className="justify-end gap-2">
            <Button
              type="button"
              variant="ghost"
              onClick={() => navigate("/relying-parties")}
            >
              취소
            </Button>
            <Button type="submit" disabled={createMutation.isPending}>
              <Save size={16} className="mr-2" />
              생성
            </Button>
          </CardFooter>
        </Card>
      </form>
    </div>
  );
}

export default RelyingPartyCreatePage;