"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { ErrorNote, inputClass } from "@/components/AuthCard";
import { apiPost } from "@/lib/client-api";

const PLATFORMS = [
  ["UNKNOWN", "Not sure"],
  ["WORDPRESS", "WordPress"],
  ["SHOPIFY", "Shopify"],
  ["WEBFLOW", "Webflow"],
  ["WOOCOMMERCE", "WooCommerce"],
  ["CUSTOM_PHP", "Custom PHP"],
  ["LARAVEL", "Laravel"],
  ["NEXTJS", "Next.js"],
  ["STATIC_HTML", "Static HTML"],
  ["SITEMAP_ONLY", "Sitemap-only monitoring"],
] as const;

export function AddWebsiteForm({ organisationId }: { organisationId: string }) {
  const router = useRouter();
  const [url, setUrl] = useState("");
  const [name, setName] = useState("");
  const [platform, setPlatform] = useState("UNKNOWN");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setError(null);
    const normalizedUrl = /^https?:\/\//i.test(url) ? url : `https://${url}`;
    const result = await apiPost<{ website: { id: string } }>(
      `/api/organisations/${organisationId}/websites`,
      { url: normalizedUrl, name, platform }
    );
    setBusy(false);
    if (result.ok) {
      router.push(`/dashboard/websites/${result.data.website.id}`);
      router.refresh();
    } else {
      setError(result.error);
    }
  }

  return (
    <form onSubmit={submit} className="mt-4 grid gap-4 sm:grid-cols-2">
      <div>
        <label htmlFor="site-url" className="block text-sm font-medium text-slate-700">
          Website address
        </label>
        <input id="site-url" required placeholder="www.example.co.uk" className={inputClass}
          value={url} onChange={(e) => setUrl(e.target.value)} />
      </div>
      <div>
        <label htmlFor="site-name" className="block text-sm font-medium text-slate-700">
          Business name
        </label>
        <input id="site-name" required placeholder="Example Motors" className={inputClass}
          value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <label htmlFor="site-platform" className="block text-sm font-medium text-slate-700">
          Platform
        </label>
        <select id="site-platform" className={inputClass} value={platform}
          onChange={(e) => setPlatform(e.target.value)}>
          {PLATFORMS.map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </select>
      </div>
      <div className="flex items-end">
        <button
          type="submit"
          disabled={busy}
          className="rounded-lg bg-slate-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-700 disabled:opacity-50"
        >
          {busy ? "Adding…" : "Add website"}
        </button>
      </div>
      {error && (
        <div className="sm:col-span-2">
          <ErrorNote message={error} />
        </div>
      )}
    </form>
  );
}