import React, { useState } from "react";
import { X } from "lucide-react";
import type { ClientSite } from "../types";
import { normalizeUrl } from "../../backend/validation";
export function parseImport(input: string): {
  sites: Partial<ClientSite>[];
  errors: string[];
} {
  const sites: Partial<ClientSite>[] = [];
  const errors: string[] = [];
  const seen = new Set<string>();
  const lines = input
    .split("\n")
    .map((value, index) => ({ value: value.trim(), line: index + 1 }))
    .filter((l) => l.value);
  if (lines.length > 100)
    return { sites, errors: ["Had 100 baris setiap import."] };
  for (const { value, line } of lines) {
    try {
      const delimiter = value.includes("|")
        ? "|"
        : value.includes(",")
          ? ","
          : null;
      const i = delimiter ? value.indexOf(delimiter) : -1;
      const name = i >= 0 ? value.slice(0, i).trim() : "";
      const raw = i >= 0 ? value.slice(i + 1).trim() : value;
      const url = normalizeUrl(raw);
      if (seen.has(url)) throw new Error("URL berulang dalam senarai.");
      seen.add(url);
      sites.push({
        name: name || new URL(url).hostname,
        url,
        clientName: name || new URL(url).hostname,
        packageType: "care_plan",
        category: "corporate",
      });
    } catch (e) {
      errors.push(`Baris ${line}: ${(e as Error).message}`);
    }
  }
  return { sites, errors };
}
export function BulkImportModal({
  isOpen,
  onClose,
  onBulkAdd,
}: {
  isOpen: boolean;
  onClose: () => void;
  onBulkAdd: (sites: Partial<ClientSite>[]) => Promise<void>;
}) {
  const [text, setText] = useState(""),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false);
  if (!isOpen) return null;
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    const parsed = parseImport(text);
    setError("");
    if (parsed.errors.length || !parsed.sites.length) {
      setError(
        parsed.errors.join("\n") || "Masukkan sekurang-kurangnya satu URL.",
      );
      return;
    }
    setBusy(true);
    try {
      await onBulkAdd(parsed.sites);
      setText("");
      onClose();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <div className="fixed inset-0 z-50 bg-slate-950/80 flex items-center justify-center p-4">
      <form
        onSubmit={submit}
        className="w-full max-w-xl rounded-2xl bg-slate-900 border border-slate-700 p-6 space-y-4 max-h-[90vh] overflow-auto"
      >
        <div className="flex justify-between">
          <h2 className="font-bold">Import website</h2>
          <button type="button" aria-label="Tutup" onClick={onClose}>
            <X />
          </button>
        </div>
        <p className="text-sm text-slate-400">
          Satu URL setiap baris, atau Nama Client | URL. Maksimum 100 website.
          URL yang sudah disimpan akan dilangkau.
        </p>
        <textarea
          aria-label="Senarai URL"
          rows={9}
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder={
            "https://client.com\nNama Client | https://domain.com/staging/"
          }
          className="w-full p-3 rounded-lg bg-slate-800 border border-slate-700 text-sm font-mono"
        />
        {error && (
          <p role="alert" className="text-red-300 whitespace-pre-line text-sm">
            {error}
          </p>
        )}
        <button
          disabled={busy}
          className="px-4 py-2 bg-blue-600 rounded-lg text-sm disabled:opacity-50"
        >
          {busy ? "Mengimport..." : "Import & semak"}
        </button>
      </form>
    </div>
  );
}