"use client";

import { useEffect, useState } from "react";
import { api, Profile } from "@/lib/api";
import { useApi } from "@/hooks/useApi";
import { useSession } from "@/session/SessionProvider";
import { useLocale } from "@/i18n/LocaleProvider";
import { Button, ErrorState, Field, PageHeader, SkeletonCard, StatusBadge, Tone } from "@/components/ui";

const statusTone: Record<string, Tone> = {
  ACTIVE: "success",
  PENDING: "warning",
  SUSPENDED: "danger",
  REJECTED: "danger",
};

export default function ProfilePage() {
  const { t } = useLocale();
  const { investorId } = useSession();
  const state = useApi<Profile>(() => api.profile(investorId!), [investorId]);

  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [iban, setIban] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [ok, setOk] = useState(false);

  // Seed the form from the loaded profile once.
  useEffect(() => {
    if (state.data) {
      setName(state.data.name ?? "");
      setPhone(state.data.phone ?? "");
      setIban(state.data.iban ?? "");
    }
  }, [state.data]);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    setError(null);
    setOk(false);
    try {
      await api.updateProfile(investorId!, { name, phone, iban });
      setOk(true);
      state.reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : t("common.error"));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div>
      <PageHeader titleKey="nav.profile" />

      {state.loading ? (
        <SkeletonCard rows={4} />
      ) : state.error ? (
        <ErrorState onRetry={state.reload} />
      ) : state.data ? (
        <form onSubmit={submit} className="card max-w-lg space-y-4 p-5">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm text-muted">{state.data.email}</div>
              <div className="text-xs text-muted-dim">{t("profile.emailImmutable")}</div>
            </div>
            <StatusBadge tone={statusTone[state.data.status] ?? "neutral"}>
              {state.data.status}
            </StatusBadge>
          </div>

          <Field
            label={t("profile.name")}
            required
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <Field
            label={t("profile.phone")}
            type="tel"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
            placeholder="+9665XXXXXXXX"
          />
          <Field
            label={t("profile.iban")}
            value={iban}
            onChange={(e) => setIban(e.target.value)}
            placeholder="SA00 0000 0000 0000 0000 0000"
          />
          <p className="text-xs text-muted">{t("profile.ibanNote")}</p>

          {error && <div className="tint tone-danger rounded-card border p-3 text-sm">{error}</div>}
          {ok && (
            <div className="tint tone-success rounded-card border p-3 text-sm">
              {t("profile.saved")}
            </div>
          )}

          <Button variant="primary" type="submit" disabled={busy || !name}>
            {busy ? t("common.loading") : t("profile.save")}
          </Button>
        </form>
      ) : null}
    </div>
  );
}