"use client";

import { Input, Select, Card, CardHeader, CardTitle, CardContent } from "@/components/ui/index";
import type { CustomFieldDefinitionDto } from "@/lib/customFields.shared";
import { useLanguage } from "@/i18n/LanguageContext";
import { ListTree } from "lucide-react";
import type { FieldErrors, FieldValues, Path, UseFormRegister } from "react-hook-form";

function fieldLabel(d: CustomFieldDefinitionDto, language: string) {
  return language === "ar" ? d.fieldLabelAr ?? d.fieldLabel : d.fieldLabel;
}

export function EntityCustomFieldsReadOnly({
  definitions,
  values,
  /** Inline rows inside another card (e.g. lead «Customer information»); same layout as other fields, no extra card title. */
  embed = false,
}: {
  definitions: CustomFieldDefinitionDto[];
  values: Record<string, string>;
  embed?: boolean;
}) {
  const { t, language } = useLanguage();
  if (!definitions.length) return null;

  const rows = definitions.map((d) => {
    const v = values[d.fieldName];
    const display = v != null && v !== "" ? v : "—";
    const label = fieldLabel(d, language);

    if (embed) {
      return (
        <div key={d.id} className="flex items-start gap-3">
          <span className="text-muted-foreground mt-0.5 flex-shrink-0">
            <ListTree className="w-4 h-4" />
          </span>
          <div>
            <p className="text-xs text-muted-foreground font-medium">{label}</p>
            <div className="text-sm text-foreground mt-0.5 break-words">{display}</div>
          </div>
        </div>
      );
    }

    return (
      <div
        key={d.id}
        className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-4 border-b border-border/60 pb-3 last:border-0 last:pb-0"
      >
        <span className="text-xs font-medium text-muted-foreground sm:w-40 flex-shrink-0">{label}</span>
        <span className="text-sm text-foreground break-words">{display}</span>
      </div>
    );
  });

  if (embed) {
    return <>{rows}</>;
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("customFields.sectionTitle")}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">{rows}</CardContent>
    </Card>
  );
}

/** Inline custom field inputs for react-hook-form (`customFields.<fieldName>`), with Zod-driven errors. */
export function EntityCustomFieldsFormInputs<T extends FieldValues & { customFields: Record<string, string> }>({
  definitions,
  register,
  errors,
}: {
  definitions: CustomFieldDefinitionDto[];
  register: UseFormRegister<T>;
  errors: FieldErrors<T>;
}) {
  const { t, language } = useLanguage();
  if (!definitions.length) return null;

  const cfErrors = errors.customFields as Record<string, { message?: string }> | undefined;
  const emptySelectOpt = { value: "", label: "—" };

  return (
    <>
      {definitions.map((d) => {
        const label = fieldLabel(d, language);
        const err = cfErrors?.[d.fieldName]?.message;
        const name = `customFields.${d.fieldName}` as Path<T>;

        if (d.fieldType === "select") {
          const opts = (d.options ?? []).map((o) => ({ value: o, label: o }));
          return (
            <Select
              key={d.id}
              label={label}
              required={d.isRequired}
              placeholder={t("common.selectPlaceholder")}
              options={[emptySelectOpt, ...opts]}
              error={err}
              {...register(name)}
            />
          );
        }

        if (d.fieldType === "number") {
          return (
            <Input
              key={d.id}
              label={label}
              required={d.isRequired}
              type="number"
              error={err}
              {...register(name)}
            />
          );
        }

        return (
          <Input
            key={d.id}
            label={label}
            required={d.isRequired}
            error={err}
            {...register(name)}
          />
        );
      })}
    </>
  );
}

export function EntityCustomFieldsEditor({
  definitions,
  values,
  onChange,
}: {
  definitions: CustomFieldDefinitionDto[];
  values: Record<string, string>;
  onChange: (next: Record<string, string>) => void;
}) {
  const { t, language } = useLanguage();
  if (!definitions.length) return null;

  const setField = (fieldName: string, v: string) => {
    onChange({ ...values, [fieldName]: v });
  };

  const emptyOpt = { value: "", label: "—" };

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("customFields.sectionTitle")}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {definitions.map((d) => {
          const label = `${fieldLabel(d, language)}${d.isRequired ? "" : ""}`;
          const val = values[d.fieldName] ?? "";
          const req = d.isRequired;

          if (d.fieldType === "select") {
            const opts = (d.options ?? []).map((o) => ({ value: o, label: o }));
            return (
              <Select
                key={d.id}
                label={label}
                required={req}
                placeholder={t("common.selectPlaceholder")}
                options={[emptyOpt, ...opts]}
                value={val}
                onChange={(e) => setField(d.fieldName, e.target.value)}
              />
            );
          }

          if (d.fieldType === "number") {
            return (
              <Input
                key={d.id}
                label={label}
                required={req}
                type="number"
                value={val}
                onChange={(e) => setField(d.fieldName, e.target.value)}
              />
            );
          }

          return (
            <Input
              key={d.id}
              label={label}
              required={req}
              value={val}
              onChange={(e) => setField(d.fieldName, e.target.value)}
            />
          );
        })}
      </CardContent>
    </Card>
  );
}