"use client";

import { useState, useCallback, useEffect, useRef } from "react";
import { useTranslations } from "next-intl";
import { Card } from "@/components/ui/card";
import { PACKAGE_CATALOG, type PackageDef } from "@/lib/packages";

type Step = "welcome" | "configure" | "billing" | "confirm";

const STEPS: Step[] = ["welcome", "configure", "billing", "confirm"];

// Inline fallbacks — only used if the API call to /api/workspace-defaults fails
const FALLBACK_SOUL = `# AI Assistant

You are a helpful AI assistant for {company}. You are professional, concise, and friendly.

## Guidelines
- Answer questions accurately and helpfully
- If you don't know something, say so
- Keep responses clear and to the point
- Respect privacy and confidentiality
`;

const FALLBACK_AGENTS = `# Agents

On session start, read the following workspace files in order:
1. SOUL.md — your personality and behavioural guidelines
2. TOOLS.md — available tools and how to use them
3. USER.md — information about the current user (if present)

Follow the instructions in SOUL.md for every interaction.
`;

const FALLBACK_TOOLS = `# Tools

The following tools are available to you as an AI assistant.

## LLM
You have access to a large language model for text generation, summarisation,
translation, and general question answering.
`;

const CATEGORIES = [
  { key: "channel" as const, labelKey: "categories.channels" },
  { key: "skill" as const, labelKey: "categories.skills" },
] as const;

interface WizardProps {
  orgName: string;
  onComplete: () => void;
}

export function OnboardingWizard({ orgName, onComplete }: WizardProps) {
  const t = useTranslations("onboarding");
  const tPkg = useTranslations("packages");
  const tCommon = useTranslations("common");

  const [step, setStep] = useState<Step>("welcome");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const [advancedOpen, setAdvancedOpen] = useState(false);
  const [defaultsLoaded, setDefaultsLoaded] = useState(false);

  const [config, setConfig] = useState({
    agentName: "Assistant",
    soulMd: FALLBACK_SOUL.replace("{company}", orgName),
    agentsMd: FALLBACK_AGENTS,
    packages: [] as string[],
    billingAddress: {
      company: orgName,
      street: "",
      city: "",
      postalCode: "",
      country: "CH",
    },
    billingNotes: "",
  });

  // TOOLS.md preview — readonly, auto-generated
  const [toolsMdPreview, setToolsMdPreview] = useState(FALLBACK_TOOLS);

  // Per-package collected secrets: { "telegram": { "bot-token": "123:ABC" }, ... }
  const [packageSecrets, setPackageSecrets] = useState<
    Record<string, Record<string, string>>
  >({});
  // Per-package disclaimer acceptance
  const [disclaimerAccepted, setDisclaimerAccepted] = useState<
    Record<string, boolean>
  >({});

  // Fetch DB-stored defaults on mount
  useEffect(() => {
    fetch(`/api/workspace-defaults?orgName=${encodeURIComponent(orgName)}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (data) {
          setConfig((prev) => ({
            ...prev,
            soulMd: data.soulMd ?? prev.soulMd,
            agentsMd: data.agentsMd ?? prev.agentsMd,
          }));
          setToolsMdPreview(data.toolsMd ?? FALLBACK_TOOLS);
          setDefaultsLoaded(true);
        }
      })
      .catch(() => {
        /* use inline fallbacks */
      });
  }, [orgName]);

  // Re-fetch TOOLS.md preview when packages change
  const packagesKey = config.packages.sort().join(",");
  const prevPackagesKey = useRef(packagesKey);
  useEffect(() => {
    if (prevPackagesKey.current === packagesKey && defaultsLoaded) return;
    prevPackagesKey.current = packagesKey;
    fetch(
      `/api/workspace-defaults?orgName=${encodeURIComponent(orgName)}&packages=${encodeURIComponent(packagesKey)}`
    )
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (data?.toolsMd) setToolsMdPreview(data.toolsMd);
      })
      .catch(() => {});
  }, [packagesKey, orgName, defaultsLoaded]);

  const stepIndex = STEPS.indexOf(step);

  const goNext = () => {
    if (stepIndex < STEPS.length - 1) setStep(STEPS[stepIndex + 1]);
  };

  const goBack = () => {
    if (stepIndex > 0) setStep(STEPS[stepIndex - 1]);
  };

  const togglePackage = useCallback((pkgId: string) => {
    setConfig((prev) => {
      const removing = prev.packages.includes(pkgId);
      if (removing) {
        setPackageSecrets((s) => {
          const next = { ...s };
          delete next[pkgId];
          return next;
        });
        setDisclaimerAccepted((d) => {
          const next = { ...d };
          delete next[pkgId];
          return next;
        });
      }
      return {
        ...prev,
        packages: removing
          ? prev.packages.filter((p) => p !== pkgId)
          : [...prev.packages, pkgId],
      };
    });
  }, []);

  const updateSecret = useCallback(
    (pkgId: string, key: string, value: string) => {
      setPackageSecrets((prev) => ({
        ...prev,
        [pkgId]: { ...(prev[pkgId] || {}), [key]: value },
      }));
    },
    []
  );

  // Validate that all secret-requiring enabled packages have complete credentials
  const packageCredentialsValid = (): boolean => {
    for (const pkgId of config.packages) {
      const def = PACKAGE_CATALOG.find((p) => p.id === pkgId);
      if (!def?.requiresSecrets) continue;
      const secrets = packageSecrets[pkgId] || {};
      for (const field of def.secrets || []) {
        if (!secrets[field.key]?.trim()) return false;
      }
      if (def.disclaimerKey && !disclaimerAccepted[pkgId]) return false;
    }
    return true;
  };

  const handleSubmit = async () => {
    setSubmitting(true);
    setError("");

    try {
      // Build secrets payload — only for packages that require them
      const secretsPayload: Record<string, Record<string, string>> = {};
      for (const pkgId of config.packages) {
        const def = PACKAGE_CATALOG.find((p) => p.id === pkgId);
        if (def?.requiresSecrets && packageSecrets[pkgId]) {
          secretsPayload[pkgId] = packageSecrets[pkgId];
        }
      }

      const res = await fetch("/api/onboarding", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...config,
          packageSecrets:
            Object.keys(secretsPayload).length > 0
              ? secretsPayload
              : undefined,
        }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || "Submission failed");
      }

      onComplete();
    } catch (err: any) {
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  };

  // Step indicator
  const StepIndicator = () => (
    <div className="flex items-center justify-center gap-2 mb-8">
      {STEPS.map((s, i) => (
        <div key={s} className="flex items-center gap-2">
          <div
            className={`h-2 w-2 rounded-full transition-colors ${
              i <= stepIndex ? "bg-accent" : "bg-border"
            }`}
          />
          {i < STEPS.length - 1 && (
            <div
              className={`h-px w-8 transition-colors ${
                i < stepIndex ? "bg-accent" : "bg-border"
              }`}
            />
          )}
        </div>
      ))}
    </div>
  );

  return (
    <div className="max-w-xl mx-auto">
      <StepIndicator />

      {/* Step: Welcome */}
      {step === "welcome" && (
        <Card className="animate-in">
          <div className="text-center py-4">
            <div className="h-14 w-14 rounded-xl bg-accent/15 flex items-center justify-center mx-auto mb-4">
              <svg
                className="h-7 w-7 text-accent"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.5}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
                />
              </svg>
            </div>
            <h2 className="font-display text-xl font-semibold text-text-primary mb-2">
              {t("welcomeTitle")}
            </h2>
            <p className="text-sm text-text-secondary max-w-sm mx-auto mb-6">
              {t("welcomeDescription")}
            </p>
            <div className="space-y-2 text-left max-w-sm mx-auto mb-6">
              {["swissHosted", "privacy", "customizable"].map((key) => (
                <div key={key} className="flex items-start gap-2">
                  <span className="text-accent mt-0.5 text-sm">✓</span>
                  <span className="text-sm text-text-secondary">
                    {t(`welcomeFeature_${key}`)}
                  </span>
                </div>
              ))}
            </div>
          </div>
          <div className="flex justify-end">
            <button
              onClick={goNext}
              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
            >
              {t("getStarted")}
            </button>
          </div>
        </Card>
      )}

      {/* Step: Configure */}
      {step === "configure" && (
        <Card className="animate-in">
          <h2 className="font-display text-lg font-semibold text-text-primary mb-1">
            {t("configureTitle")}
          </h2>
          <p className="text-sm text-text-secondary mb-6">
            {t("configureDescription")}
          </p>

          <div className="space-y-4">
            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                {t("agentName")}
              </label>
              <input
                type="text"
                value={config.agentName}
                onChange={(e) =>
                  setConfig((prev) => ({ ...prev, agentName: e.target.value }))
                }
                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                {t("soulMd")}
              </label>
              <textarea
                value={config.soulMd}
                onChange={(e) =>
                  setConfig((prev) => ({ ...prev, soulMd: e.target.value }))
                }
                rows={8}
                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary font-mono text-xs focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors resize-y"
              />
              <p className="text-xs text-text-muted mt-1">
                {t("soulMdHint")}
              </p>
            </div>

            {/* Advanced: AGENTS.md + TOOLS.md preview */}
            <div className="border border-border rounded-lg overflow-hidden">
              <button
                type="button"
                onClick={() => setAdvancedOpen((o) => !o)}
                className="w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-surface-3/30 transition-colors"
              >
                <span className="text-xs font-semibold uppercase tracking-wider text-text-muted">
                  {t("advancedConfig")}
                </span>
                <svg
                  className={`h-4 w-4 text-text-muted transition-transform ${
                    advancedOpen ? "rotate-180" : ""
                  }`}
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={2}
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </button>
              {advancedOpen && (
                <div className="border-t border-border px-3 py-4 space-y-4 bg-surface-1/30">
                  {/* AGENTS.md */}
                  <div>
                    <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                      {t("agentsMd")}
                    </label>
                    <textarea
                      value={config.agentsMd}
                      onChange={(e) =>
                        setConfig((prev) => ({
                          ...prev,
                          agentsMd: e.target.value,
                        }))
                      }
                      rows={6}
                      className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary font-mono text-xs focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors resize-y"
                    />
                    <p className="text-xs text-text-muted mt-1">
                      {t("agentsMdHint")}
                    </p>
                  </div>

                  {/* TOOLS.md — readonly preview */}
                  <div>
                    <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                      {t("toolsMd")}
                    </label>
                    <textarea
                      value={toolsMdPreview}
                      readOnly
                      rows={6}
                      className="w-full px-3 py-2 bg-surface-3/50 border border-border rounded-lg text-sm text-text-secondary font-mono text-xs cursor-not-allowed resize-y"
                    />
                    <p className="text-xs text-text-muted mt-1">
                      {t("toolsMdHint")}
                    </p>
                  </div>
                </div>
              )}
            </div>

            {/* Packages — grouped by category */}
            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-2">
                {t("packages")}
              </label>

              {CATEGORIES.map(({ key, labelKey }) => {
                const packages = PACKAGE_CATALOG.filter(
                  (p) => p.category === key
                );
                if (packages.length === 0) return null;

                return (
                  <div key={key} className="mb-4">
                    <h4 className="text-[10px] font-semibold uppercase tracking-wider text-text-muted/70 mb-1.5">
                      {tPkg(labelKey)}
                    </h4>
                    <div className="space-y-2">
                      {packages.map((pkg) => {
                        const isSelected = config.packages.includes(pkg.id);
                        const secrets = packageSecrets[pkg.id] || {};

                        return (
                          <div
                            key={pkg.id}
                            className={`border rounded-lg overflow-hidden transition-colors ${
                              isSelected
                                ? "border-accent bg-accent/5"
                                : "border-border bg-surface-2"
                            }`}
                          >
                            {/* Toggle row */}
                            <button
                              type="button"
                              onClick={() => togglePackage(pkg.id)}
                              className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-surface-3/30 transition-colors"
                            >
                              <div className="text-left">
                                <span
                                  className={`text-sm font-medium ${
                                    isSelected
                                      ? "text-accent"
                                      : "text-text-secondary"
                                  }`}
                                >
                                  {pkg.name}
                                </span>
                                {pkg.requiresSecrets && (
                                  <span className="ml-1.5 text-[10px] text-text-muted">
                                    ({tPkg("requiresApiKey")})
                                  </span>
                                )}
                              </div>
                              <div
                                className={`shrink-0 ml-3 h-5 w-9 rounded-full transition-colors ${
                                  isSelected ? "bg-accent" : "bg-surface-3"
                                }`}
                              >
                                <div
                                  className={`h-4 w-4 rounded-full bg-white shadow-sm mt-0.5 transition-transform ${
                                    isSelected
                                      ? "translate-x-4"
                                      : "translate-x-0.5"
                                  }`}
                                />
                              </div>
                            </button>

                            {/* Inline credential inputs — expand when selected + requires secrets */}
                            {isSelected && pkg.requiresSecrets && (
                              <div className="border-t border-border px-3 py-3 space-y-3 bg-surface-1/50">
                                {pkg.instructionsKey && (
                                  <div className="bg-surface-2 border border-border rounded-lg p-3 text-xs text-text-secondary leading-relaxed whitespace-pre-line">
                                    {tPkg(
                                      pkg.instructionsKey.replace(
                                        "packages.",
                                        ""
                                      )
                                    )}
                                  </div>
                                )}

                                {(pkg.secrets || []).map((field) => (
                                  <label key={field.key} className="block">
                                    <span className="text-xs text-text-secondary mb-1 block">
                                      {tPkg(
                                        field.labelKey.replace("packages.", "")
                                      )}
                                    </span>
                                    <input
                                      type="password"
                                      placeholder={tPkg(
                                        field.placeholderKey.replace(
                                          "packages.",
                                          ""
                                        )
                                      )}
                                      value={secrets[field.key] || ""}
                                      onChange={(e) =>
                                        updateSecret(
                                          pkg.id,
                                          field.key,
                                          e.target.value
                                        )
                                      }
                                      className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                                    />
                                  </label>
                                ))}

                                {pkg.disclaimerKey && (
                                  <label className="flex items-start gap-2 text-xs text-text-secondary">
                                    <input
                                      type="checkbox"
                                      checked={
                                        disclaimerAccepted[pkg.id] || false
                                      }
                                      onChange={(e) =>
                                        setDisclaimerAccepted((prev) => ({
                                          ...prev,
                                          [pkg.id]: e.target.checked,
                                        }))
                                      }
                                      className="mt-0.5 accent-accent"
                                    />
                                    <span>
                                      {tPkg(
                                        pkg.disclaimerKey.replace(
                                          "packages.",
                                          ""
                                        )
                                      )}
                                    </span>
                                  </label>
                                )}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                );
              })}

              <p className="text-xs text-text-muted mt-1">
                {t("packagesHint")}
              </p>
            </div>
          </div>

          <div className="flex justify-between mt-6">
            <button
              onClick={goBack}
              className="py-2 px-4 text-sm text-text-secondary hover:text-text-primary transition-colors"
            >
              {t("back")}
            </button>
            <button
              onClick={goNext}
              disabled={!packageCredentialsValid()}
              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {t("next")}
            </button>
          </div>
        </Card>
      )}

      {/* Step: Billing */}
      {step === "billing" && (
        <Card className="animate-in">
          <h2 className="font-display text-lg font-semibold text-text-primary mb-1">
            {t("billingTitle")}
          </h2>
          <p className="text-sm text-text-secondary mb-6">
            {t("billingDescription")}
          </p>

          <div className="space-y-4">
            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                {t("billingCompany")}
              </label>
              <input
                type="text"
                value={config.billingAddress.company}
                onChange={(e) =>
                  setConfig((prev) => ({
                    ...prev,
                    billingAddress: {
                      ...prev.billingAddress,
                      company: e.target.value,
                    },
                  }))
                }
                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                {t("billingStreet")}
              </label>
              <input
                type="text"
                value={config.billingAddress.street}
                onChange={(e) =>
                  setConfig((prev) => ({
                    ...prev,
                    billingAddress: {
                      ...prev.billingAddress,
                      street: e.target.value,
                    },
                  }))
                }
                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
              />
            </div>

            <div className="grid grid-cols-3 gap-3">
              <div>
                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                  {t("billingPostalCode")}
                </label>
                <input
                  type="text"
                  value={config.billingAddress.postalCode}
                  onChange={(e) =>
                    setConfig((prev) => ({
                      ...prev,
                      billingAddress: {
                        ...prev.billingAddress,
                        postalCode: e.target.value,
                      },
                    }))
                  }
                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                />
              </div>
              <div className="col-span-2">
                <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                  {t("billingCity")}
                </label>
                <input
                  type="text"
                  value={config.billingAddress.city}
                  onChange={(e) =>
                    setConfig((prev) => ({
                      ...prev,
                      billingAddress: {
                        ...prev.billingAddress,
                        city: e.target.value,
                      },
                    }))
                  }
                  className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                {t("billingCountry")}
              </label>
              <input
                type="text"
                value={config.billingAddress.country}
                onChange={(e) =>
                  setConfig((prev) => ({
                    ...prev,
                    billingAddress: {
                      ...prev.billingAddress,
                      country: e.target.value,
                    },
                  }))
                }
                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
              />
            </div>

            <div>
              <label className="block text-xs font-semibold uppercase tracking-wider text-text-muted mb-1.5">
                {t("billingNotes")}
              </label>
              <textarea
                value={config.billingNotes}
                onChange={(e) =>
                  setConfig((prev) => ({
                    ...prev,
                    billingNotes: e.target.value,
                  }))
                }
                rows={3}
                placeholder={t("billingNotesPlaceholder")}
                className="w-full px-3 py-2 bg-surface-2 border border-border rounded-lg text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors resize-y"
              />
            </div>
          </div>

          <div className="flex justify-between mt-6">
            <button
              onClick={goBack}
              className="py-2 px-4 text-sm text-text-secondary hover:text-text-primary transition-colors"
            >
              {t("back")}
            </button>
            <button
              onClick={goNext}
              className="py-2 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors"
            >
              {t("next")}
            </button>
          </div>
        </Card>
      )}

      {/* Step: Confirm */}
      {step === "confirm" && (
        <Card className="animate-in">
          <h2 className="font-display text-lg font-semibold text-text-primary mb-1">
            {t("confirmTitle")}
          </h2>
          <p className="text-sm text-text-secondary mb-6">
            {t("confirmDescription")}
          </p>

          <div className="space-y-4">
            <div className="bg-surface-2 border border-border rounded-lg p-4 space-y-3">
              <div className="flex justify-between text-sm">
                <span className="text-text-muted">{t("agentName")}</span>
                <span className="text-text-primary font-mono">
                  {config.agentName}
                </span>
              </div>
              {config.packages.length > 0 && (
                <div className="flex justify-between text-sm">
                  <span className="text-text-muted">{t("packages")}</span>
                  <div className="flex flex-wrap gap-1 justify-end">
                    {config.packages.map((pkg) => (
                      <span
                        key={pkg}
                        className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2 py-0.5"
                      >
                        {pkg}
                      </span>
                    ))}
                  </div>
                </div>
              )}
              {config.packages.some((id) =>
                PACKAGE_CATALOG.find((p) => p.id === id)?.requiresSecrets
              ) && (
                <div className="flex justify-between text-sm">
                  <span className="text-text-muted">
                    {t("credentialsProvided")}
                  </span>
                  <span className="text-emerald-400 text-xs font-medium">
                    ✓
                  </span>
                </div>
              )}
              {config.billingAddress.company && (
                <div className="flex justify-between text-sm">
                  <span className="text-text-muted">
                    {t("billingCompany")}
                  </span>
                  <span className="text-text-primary">
                    {config.billingAddress.company}
                  </span>
                </div>
              )}
              {config.billingAddress.city && (
                <div className="flex justify-between text-sm">
                  <span className="text-text-muted">{t("billingCity")}</span>
                  <span className="text-text-primary">
                    {config.billingAddress.postalCode}{" "}
                    {config.billingAddress.city}
                  </span>
                </div>
              )}
            </div>

            <p className="text-xs text-text-muted">{t("confirmNote")}</p>
          </div>

          {error && (
            <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2 mt-4">
              {error}
            </div>
          )}

          <div className="flex justify-between mt-6">
            <button
              onClick={goBack}
              className="py-2 px-4 text-sm text-text-secondary hover:text-text-primary transition-colors"
            >
              {t("back")}
            </button>
            <button
              onClick={handleSubmit}
              disabled={submitting}
              className="py-2.5 px-6 bg-accent text-white text-sm font-medium rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {submitting ? tCommon("loading") : t("submitRequest")}
            </button>
          </div>
        </Card>
      )}
    </div>
  );
}