"use client";

import {useState, useTransition} from "react";
import {updatePlatformSettings} from "@/features/tenants/server/actions";

type Settings = {
  platformName: string;
  contactEmail: string;
  contactPhone: string | null;
  timezone: string;
  maintenanceMode: boolean;
} | null;

export function PlatformSettingsForm({settings}: {settings: Settings}) {
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    setError(null);
    setSuccess(false);
    startTransition(async () => {
      const result = await updatePlatformSettings(fd);
      if (result.success) {
        setSuccess(true);
      } else {
        setError(result.error ?? "Error");
      }
    });
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
      <div>
        <label className="mb-1 block text-sm font-medium text-slate-700">Platform Name *</label>
        <input
          name="platformName"
          required
          defaultValue={settings?.platformName ?? ""}
          className="h-10 w-full rounded-lg border border-slate-200 px-3 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
        />
      </div>
      <div>
        <label className="mb-1 block text-sm font-medium text-slate-700">Contact Email *</label>
        <input
          name="contactEmail"
          type="email"
          required
          defaultValue={settings?.contactEmail ?? ""}
          className="h-10 w-full rounded-lg border border-slate-200 px-3 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
        />
      </div>
      <div>
        <label className="mb-1 block text-sm font-medium text-slate-700">Contact Phone</label>
        <input
          name="contactPhone"
          defaultValue={settings?.contactPhone ?? ""}
          className="h-10 w-full rounded-lg border border-slate-200 px-3 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
        />
      </div>
      <div>
        <label className="mb-1 block text-sm font-medium text-slate-700">Timezone</label>
        <input
          name="timezone"
          defaultValue={settings?.timezone ?? "UTC"}
          className="h-10 w-full rounded-lg border border-slate-200 px-3 text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
        />
      </div>
      <div className="flex items-center gap-3">
        <input
          id="maintenanceMode"
          name="maintenanceMode"
          type="checkbox"
          defaultChecked={settings?.maintenanceMode ?? false}
          className="h-4 w-4 rounded"
        />
        <label htmlFor="maintenanceMode" className="text-sm font-medium text-slate-700">
          Maintenance Mode
        </label>
      </div>

      {error && <p className="text-sm text-red-600">{error}</p>}
      {success && <p className="text-sm text-green-600 font-medium">Settings saved successfully.</p>}

      <button
        type="submit"
        disabled={isPending}
        className="rounded-lg bg-violet-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-violet-700 disabled:opacity-50 transition"
      >
        {isPending ? "Saving..." : "Save Settings"}
      </button>
    </form>
  );
}