"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  Modal,
  Input,
  ConfirmDialog,
  Textarea,
  Select,
} from "@/components/ui/index";
import { useLanguage } from "@/i18n/LanguageContext";
import { toast } from "sonner";
import { Pencil, Trash2, Plus, Loader2, ChevronUp, ChevronDown } from "lucide-react";
import type { CustomFieldDefinitionDto } from "@/lib/customFields.shared";
import { CUSTOM_FIELD_ENTITIES } from "@/lib/customFields.shared";

type ModalMode = "create" | "edit" | null;

/** Lines from textarea / bulk paste → trimmed non-empty strings. */
function parseOptionsText(text: string): string[] {
  return text
    .split(/\r?\n/)
    .map((s) => s.trim())
    .filter(Boolean);
}

function optionsFromRows(rows: string[]): string[] {
  return rows.map((s) => s.trim()).filter(Boolean);
}

export function CustomFieldsSettingsPanel() {
  const { t, language } = useLanguage();
  const [rows, setRows] = useState<CustomFieldDefinitionDto[]>([]);
  const [loading, setLoading] = useState(true);
  const [modalMode, setModalMode] = useState<ModalMode>(null);
  const [editing, setEditing] = useState<CustomFieldDefinitionDto | null>(null);
  const [saving, setSaving] = useState(false);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [deleting, setDeleting] = useState(false);

  const [formEntity, setFormEntity] = useState<string>("Lead");
  const [formFieldName, setFormFieldName] = useState("");
  const [formLabel, setFormLabel] = useState("");
  const [formLabelAr, setFormLabelAr] = useState("");
  const [formType, setFormType] = useState<string>("text");
  /** One row per select option (clearer than a single textarea). */
  const [formOptionItems, setFormOptionItems] = useState<string[]>([""]);
  const [bulkPasteText, setBulkPasteText] = useState("");
  const [formRequired, setFormRequired] = useState(false);
  const [formActive, setFormActive] = useState(true);

  const entityOptions = useMemo(
    () =>
      CUSTOM_FIELD_ENTITIES.map((e) => ({
        value: e,
        label:
          e === "Lead"
            ? t("settings.cfEntityLead")
            : e === "Account"
              ? t("settings.cfEntityAccount")
              : e === "Opportunity"
                ? t("settings.cfEntityOpportunity")
                : e === "Contact"
                  ? t("settings.cfEntityContact")
                  : e === "Ticket"
                    ? t("settings.cfEntityTicket")
                    : e === "Task"
                      ? t("settings.cfEntityTask")
                      : e,
      })),
    [t]
  );

  const typeOptions = useMemo(
    () => [
      { value: "text", label: t("settings.cfTypesText") },
      { value: "number", label: t("settings.cfTypesNumber") },
      { value: "select", label: t("settings.cfTypesSelect") },
    ],
    [t]
  );

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/custom-fields");
      if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
      const j = await res.json();
      const defs = j.data?.definitions;
      setRows(Array.isArray(defs) ? defs : []);
    } catch (e: any) {
      toast.error(e.message);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  const resetOptionUi = () => {
    setFormOptionItems([""]);
    setBulkPasteText("");
  };

  const openCreate = () => {
    setEditing(null);
    setFormEntity("Lead");
    setFormFieldName("");
    setFormLabel("");
    setFormLabelAr("");
    setFormType("text");
    resetOptionUi();
    setFormRequired(false);
    setFormActive(true);
    setModalMode("create");
  };

  const openEdit = (row: CustomFieldDefinitionDto) => {
    setEditing(row);
    setFormEntity(row.entity);
    setFormFieldName(row.fieldName);
    setFormLabel(row.fieldLabel);
    setFormLabelAr(row.fieldLabelAr ?? "");
    setFormType(row.fieldType);
    setFormOptionItems(row.options?.length ? [...row.options] : [""]);
    setBulkPasteText("");
    setFormRequired(row.isRequired);
    setFormActive(row.isActive);
    setModalMode("edit");
  };

  const closeModal = () => {
    setModalMode(null);
    setEditing(null);
    resetOptionUi();
  };

  const moveOption = (index: number, dir: -1 | 1) => {
    setFormOptionItems((prev) => {
      const j = index + dir;
      if (j < 0 || j >= prev.length) return prev;
      const next = [...prev];
      [next[index], next[j]] = [next[j], next[index]];
      return next;
    });
  };

  const removeOption = (index: number) => {
    setFormOptionItems((prev) => {
      if (prev.length <= 1) return [""];
      return prev.filter((_, i) => i !== index);
    });
  };

  const addOptionRow = () => {
    setFormOptionItems((prev) => [...prev, ""]);
  };

  const applyBulkPaste = () => {
    const parsed = parseOptionsText(bulkPasteText);
    setFormOptionItems(parsed.length ? parsed : [""]);
    setBulkPasteText("");
  };

  const handleSave = async () => {
    const opts = formType === "select" ? optionsFromRows(formOptionItems) : null;
    if (formType === "select" && (!opts || opts.length === 0)) {
      toast.error(t("settings.cfOptionsRequired"));
      return;
    }

    setSaving(true);
    try {
      if (modalMode === "create") {
        const body = {
          entity: formEntity,
          fieldName: formFieldName.trim(),
          fieldLabel: formLabel.trim(),
          fieldLabelAr: formLabelAr.trim() || null,
          fieldType: formType,
          isRequired: formRequired,
          isActive: formActive,
          options: formType === "select" ? opts : null,
        };
        const res = await fetch("/api/custom-fields", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body),
        });
        if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
        toast.success(t("settings.cfToastSaved"));
      } else if (modalMode === "edit" && editing) {
        const body: Record<string, unknown> = {
          fieldLabel: formLabel.trim(),
          fieldLabelAr: formLabelAr.trim() || null,
          fieldType: formType,
          isRequired: formRequired,
          isActive: formActive,
        };
        if (formType === "select") body.options = opts;
        const res = await fetch(`/api/custom-fields/${editing.id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body),
        });
        if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
        toast.success(t("settings.cfToastSaved"));
      }
      closeModal();
      await load();
    } catch (e: any) {
      toast.error(e.message);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!deleteId) return;
    setDeleting(true);
    try {
      const res = await fetch(`/api/custom-fields/${deleteId}`, { method: "DELETE" });
      if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
      toast.success(t("settings.cfToastDeleted"));
      setDeleteId(null);
      await load();
    } catch (e: any) {
      toast.error(e.message);
    } finally {
      setDeleting(false);
    }
  };

  const entityLabel = (e: string) =>
    e === "Lead"
      ? t("settings.cfEntityLead")
      : e === "Account"
        ? t("settings.cfEntityAccount")
        : e === "Opportunity"
          ? t("settings.cfEntityOpportunity")
          : e === "Contact"
            ? t("settings.cfEntityContact")
            : e === "Ticket"
              ? t("settings.cfEntityTicket")
              : e === "Task"
                ? t("settings.cfEntityTask")
                : e;

  const typeLabel = (ft: string) =>
    ft === "number"
      ? t("settings.cfTypesNumber")
      : ft === "select"
        ? t("settings.cfTypesSelect")
        : t("settings.cfTypesText");

  const setFieldType = (value: string) => {
    setFormType(value);
    if (value === "select") {
      setFormOptionItems((prev) => (prev.length === 0 ? [""] : prev));
    }
  };

  return (
    <>
      <Card>
        <CardHeader className="flex flex-row flex-wrap items-start justify-between gap-3">
          <div>
            <CardTitle>{t("settings.customFieldsCard")}</CardTitle>
            <p className="text-sm text-muted-foreground mt-1">{t("settings.customFieldsDesc")}</p>
          </div>
          <Button type="button" size="sm" onClick={openCreate}>
            <Plus className="w-4 h-4" />
            {t("settings.cfAdd")}
          </Button>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="w-4 h-4 animate-spin" />
              {t("settings.cfLoading")}
            </div>
          ) : rows.length === 0 ? (
            <p className="text-sm text-muted-foreground">{t("settings.cfEmpty")}</p>
          ) : (
            <div className="overflow-x-auto rounded-lg border border-border">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-border bg-muted/40 text-start">
                    <th className="px-3 py-2 font-medium">{t("settings.cfColEntity")}</th>
                    <th className="px-3 py-2 font-medium">{t("settings.cfColName")}</th>
                    <th className="px-3 py-2 font-medium">{t("settings.cfColLabel")}</th>
                    <th className="px-3 py-2 font-medium">{t("settings.cfColType")}</th>
                    <th className="px-3 py-2 font-medium">{t("settings.cfColOrder")}</th>
                    <th className="px-3 py-2 font-medium">{t("settings.cfColActive")}</th>
                    <th className="px-3 py-2 font-medium w-24">{t("common.actions")}</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((r) => (
                    <tr key={r.id} className="border-b border-border/80 last:border-0">
                      <td className="px-3 py-2 whitespace-nowrap">{entityLabel(r.entity)}</td>
                      <td className="px-3 py-2 font-mono text-xs">{r.fieldName}</td>
                      <td className="px-3 py-2 max-w-[200px] truncate">
                        {language === "ar" ? r.fieldLabelAr ?? r.fieldLabel : r.fieldLabel}
                      </td>
                      <td className="px-3 py-2">{typeLabel(r.fieldType)}</td>
                      <td className="px-3 py-2">{r.order}</td>
                      <td className="px-3 py-2">{r.isActive ? t("common.active") : t("common.inactive")}</td>
                      <td className="px-3 py-2">
                        <div className="flex items-center gap-1">
                          <Button type="button" variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => openEdit(r)}>
                            <Pencil className="w-4 h-4" />
                          </Button>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0 text-destructive"
                            onClick={() => setDeleteId(r.id)}
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </CardContent>
      </Card>

      <Modal
        open={modalMode !== null}
        onClose={closeModal}
        title={modalMode === "create" ? t("settings.cfCreateTitle") : t("settings.cfEditTitle")}
        size="lg"
      >
        <div className="px-6 py-4 space-y-4">
          <Select
            label={t("settings.cfEntity")}
            options={entityOptions}
            value={formEntity}
            disabled={modalMode === "edit"}
            onChange={(e) => setFormEntity(e.target.value)}
          />
          <Input
            label={t("settings.cfFieldName")}
            value={formFieldName}
            disabled={modalMode === "edit"}
            onChange={(e) => setFormFieldName(e.target.value)}
            placeholder="my_field"
          />
          <Input label={t("settings.cfFieldLabel")} value={formLabel} onChange={(e) => setFormLabel(e.target.value)} required />
          <Input label={t("settings.cfFieldLabelAr")} value={formLabelAr} onChange={(e) => setFormLabelAr(e.target.value)} />

          <Select
            label={t("settings.cfFieldType")}
            options={typeOptions}
            value={formType}
            onChange={(e) => setFieldType(e.target.value)}
          />

          {formType === "select" && (
            <div className="space-y-3 rounded-lg border border-border bg-muted/15 p-3 sm:p-4">
              <div>
                <span className="text-sm font-medium text-foreground">{t("settings.cfOptions")}</span>
                <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{t("settings.cfOptionsHelp")}</p>
              </div>
              <ul className="space-y-2">
                {formOptionItems.map((val, index) => (
                  <li key={index} className="flex items-start gap-2">
                    <span
                      className="text-xs text-muted-foreground tabular-nums w-6 shrink-0 pt-2.5 text-end"
                      aria-hidden
                    >
                      {index + 1}.
                    </span>
                    <Input
                      className="flex-1 min-w-0"
                      value={val}
                      onChange={(e) => {
                        const next = [...formOptionItems];
                        next[index] = e.target.value;
                        setFormOptionItems(next);
                      }}
                      placeholder={t("settings.cfOptionPlaceholder")}
                    />
                    <div className="flex shrink-0 items-center gap-0.5 pt-0.5">
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-9 w-9 p-0"
                        disabled={index === 0}
                        onClick={() => moveOption(index, -1)}
                        aria-label={t("settings.cfMoveUp")}
                      >
                        <ChevronUp className="w-4 h-4" />
                      </Button>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-9 w-9 p-0"
                        disabled={index === formOptionItems.length - 1}
                        onClick={() => moveOption(index, 1)}
                        aria-label={t("settings.cfMoveDown")}
                      >
                        <ChevronDown className="w-4 h-4" />
                      </Button>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-9 w-9 p-0 text-destructive hover:text-destructive"
                        onClick={() => removeOption(index)}
                        aria-label={t("settings.cfRemoveOption")}
                      >
                        <Trash2 className="w-4 h-4" />
                      </Button>
                    </div>
                  </li>
                ))}
              </ul>
              <Button type="button" variant="outline" size="sm" onClick={addOptionRow} className="w-full sm:w-auto">
                <Plus className="w-4 h-4" />
                {t("settings.cfAddOption")}
              </Button>

              <details className="rounded-md border border-border/80 bg-background/50 pt-2 pb-2 px-2">
                <summary className="cursor-pointer select-none text-xs font-medium text-muted-foreground hover:text-foreground px-1 py-1 list-inside">
                  {t("settings.cfOptionsBulkTitle")}
                </summary>
                <div className="mt-2 space-y-2 pl-1">
                  <Textarea
                    rows={4}
                    placeholder={t("settings.cfOptionsBulkHint")}
                    value={bulkPasteText}
                    onChange={(e) => setBulkPasteText(e.target.value)}
                    className="text-sm"
                  />
                  <Button type="button" size="sm" variant="secondary" onClick={applyBulkPaste}>
                    {t("common.import")}
                  </Button>
                </div>
              </details>
            </div>
          )}

          <div className="flex flex-wrap gap-6">
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" checked={formRequired} onChange={(e) => setFormRequired(e.target.checked)} />
              {t("settings.cfRequired")}
            </label>
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" checked={formActive} onChange={(e) => setFormActive(e.target.checked)} />
              {t("settings.cfActive")}
            </label>
          </div>
          <div className="flex justify-end gap-2 pt-2">
            <Button type="button" variant="outline" onClick={closeModal}>
              {t("settings.cfCancel")}
            </Button>
            <Button type="button" loading={saving} onClick={handleSave}>
              {t("settings.cfSave")}
            </Button>
          </div>
        </div>
      </Modal>

      <ConfirmDialog
        open={!!deleteId}
        onClose={() => setDeleteId(null)}
        onConfirm={handleDelete}
        isLoading={deleting}
        title={t("settings.cfDelete")}
        description={t("settings.cfDeleteConfirm")}
        confirmLabel={t("settings.cfDelete")}
        variant="destructive"
      />
    </>
  );
}