"use client";

import { useState, useTransition } from "react";
import { Button, Card, Input, Label } from "@/components/ui";

type Props = {
  initialNickname: string;
  initialJarvisName: string;
  labels: {
    title: string;
    subtitle: string;
    name: string;
    email: string;
    nickname: string;
    nicknameHint: string;
    jarvisName: string;
    jarvisNameHint: string;
    save: string;
    saving: string;
    saved: string;
    notConfigured: string;
    rootDomain: string;
    dokploy: string;
    rootDomainValue: string;
    dokployValue: string;
    emailValue: string;
    nameValue: string;
  };
};

export function SettingsForm({ initialNickname, initialJarvisName, labels }: Props) {
  const [nickname, setNickname] = useState(initialNickname);
  const [jarvisName, setJarvisName] = useState(initialJarvisName);
  const [msg, setMsg] = useState("");
  const [pending, startTransition] = useTransition();

  const onSave = () => {
    setMsg("");
    startTransition(async () => {
      const res = await fetch("/api/user/settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ nickname, jarvis_name: jarvisName }),
      });
      if (res.ok) setMsg(labels.saved);
      else setMsg("Error");
    });
  };

  return (
    <div className="space-y-6">
      <Card>
        <h2 className="mb-4 text-lg font-bold text-ink">{labels.title}</h2>
        <dl className="grid gap-4 md:grid-cols-2">
          <div>
            <dt className="text-sm text-slate-500">{labels.name}</dt>
            <dd className="font-semibold text-ink">{labels.nameValue}</dd>
          </div>
          <div>
            <dt className="text-sm text-slate-500">{labels.email}</dt>
            <dd className="font-semibold text-ink">{labels.emailValue}</dd>
          </div>
          <div>
            <dt className="text-sm text-slate-500">{labels.rootDomain}</dt>
            <dd className="font-semibold text-ink">{labels.rootDomainValue || labels.notConfigured}</dd>
          </div>
          <div>
            <dt className="text-sm text-slate-500">{labels.dokploy}</dt>
            <dd className="font-semibold text-ink">{labels.dokployValue || labels.notConfigured}</dd>
          </div>
        </dl>
      </Card>

      <Card>
        <h2 className="mb-1 text-lg font-bold text-ink">{labels.nickname}</h2>
        <p className="mb-4 text-sm text-slate-500">{labels.nicknameHint}</p>
        <div className="space-y-4">
          <div>
            <Label htmlFor="nickname">{labels.nickname}</Label>
            <Input
              id="nickname"
              value={nickname}
              onChange={(e) => setNickname(e.target.value)}
              placeholder="e.g. Abu Ali"
              className="mt-1"
            />
          </div>
          <div>
            <Label htmlFor="jarvisName">{labels.jarvisName}</Label>
            <Input
              id="jarvisName"
              value={jarvisName}
              onChange={(e) => setJarvisName(e.target.value)}
              placeholder="e.g. J.A.R.V.I.S"
              className="mt-1"
            />
            <p className="mt-1 text-xs text-slate-400">{labels.jarvisNameHint}</p>
          </div>
          <div className="flex items-center gap-4">
            <Button onClick={onSave} disabled={pending}>
              {pending ? labels.saving : labels.save}
            </Button>
            {msg && <span className="text-sm text-emerald-600">{msg}</span>}
          </div>
        </div>
      </Card>
    </div>
  );
}