"use client";

import { useMemo, useState } from "react";
import { Button } from "@/components/ui/Button";
import { smsSegmentStats } from "@/lib/sms-segments";

export type CatalogChannel = {
  key: string;
  label: string;
  family?: "sms" | "messenger" | "internal" | string;
  via?: string;
  platform?: boolean;
  supports_media?: boolean;
};

export type TemplateMediaItem = { type?: string; url: string; name?: string | null };

export type MessageTemplateRow = {
  key: string;
  label: string;
  group: string;
  account: "system" | "school" | string;
  placeholders: string[];
  enabled: boolean;
  body: string;
  sms_body: string;
  messenger_body: string;
  media: TemplateMediaItem[];
  channels: string[];
  default_body: string;
  apply_to_all_schools?: boolean;
};

const SAMPLE_VARS: Record<string, string> = {
  full_name: "علی رضایی",
  student_name: "محمد رضایی",
  school_name: "دبستان نمونه",
  date: "۱۴۰۵/۰۵/۲۷",
  otp: "۱۲۳۴۵",
  national_code: "۰۰۱۲۳۴۵۶۷۸",
  username: "۰۰۱۲۳۴۵۶۷۸",
  password: "Ab12cd34ef",
  tracking_code: "PR-1405-102",
  tracking_url: "https://portal.school.local/track",
  continue_link: "https://portal.school.local/continue",
  hours: "۲۴",
  note: "لطفاً پیگیری کنید",
  status_label: "غیبت",
};

function previewWithChips(text: string, placeholders: string[]) {
  if (!text) {
    return <span className="text-slate-400">متن پیام را بنویسید…</span>;
  }
  const pattern = new RegExp(`(\\{(?:${placeholders.join("|")})\\})`, "g");
  const parts = text.split(pattern);
  return parts.map((part, index) => {
    const match = part.match(/^\{(.+)\}$/);
    if (match && placeholders.includes(match[1])) {
      return (
        <span
          key={`${part}-${index}`}
          className="mx-0.5 inline-flex rounded-md bg-emerald-100 px-1 py-0.5 text-[11px] font-semibold text-emerald-800"
        >
          {part}
        </span>
      );
    }
    return <span key={`${part}-${index}`}>{part}</span>;
  });
}

function PlaceholderChips({
  placeholders,
  disabled,
  onInsert,
}: {
  placeholders: string[];
  disabled: boolean;
  onInsert: (placeholder: string) => void;
}) {
  return (
    <div className="flex flex-wrap gap-1.5">
      {placeholders.map((placeholder) => (
        <button
          key={placeholder}
          type="button"
          disabled={disabled}
          onClick={() => onInsert(placeholder)}
          className="rounded-full bg-primary/10 px-2.5 py-0.5 text-[11px] font-medium text-primary hover:bg-primary/15 disabled:opacity-50"
        >
          {`{${placeholder}}`}
        </button>
      ))}
    </div>
  );
}

export function TemplateEditorCard({
  row,
  draft,
  channels,
  readOnly,
  saving,
  uploading,
  canApplyAll,
  onChange,
  onToggleChannel,
  onInsertPlaceholder,
  onUpload,
  onSave,
}: {
  row: MessageTemplateRow;
  draft: MessageTemplateRow;
  channels: CatalogChannel[];
  readOnly: boolean;
  saving: boolean;
  uploading: boolean;
  canApplyAll: boolean;
  onChange: (patch: Partial<MessageTemplateRow>) => void;
  onToggleChannel: (channel: string) => void;
  onInsertPlaceholder: (placeholder: string, field: "sms_body" | "messenger_body") => void;
  onUpload: (file: File) => void;
  onSave: () => void;
}) {
  const [dragOver, setDragOver] = useState(false);
  const [fileError, setFileError] = useState<string | null>(null);
  const smsText = draft.sms_body || draft.body || "";
  const messengerText = draft.messenger_body || draft.body || "";
  const stats = useMemo(() => smsSegmentStats(smsText), [smsText]);
  const imageUrl = draft.media?.[0]?.url;
  const messengerSelected = channels.some(
    (channel) => channel.family === "messenger" && draft.channels.includes(channel.key),
  );

  const acceptFile = (file: File | undefined) => {
    if (!file || readOnly) return;
    if (!file.type.startsWith("image/")) {
      setFileError("فقط تصویر JPG یا PNG مجاز است.");
      return;
    }
    if (file.size > 5 * 1024 * 1024) {
      setFileError("حجم تصویر نباید بیشتر از ۵ مگابایت باشد.");
      return;
    }
    setFileError(null);
    onUpload(file);
  };

  return (
    <article className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white shadow-sm">
      <div className="grid gap-0 lg:grid-cols-[minmax(0,1.4fr)_minmax(280px,0.9fr)]">
        <div className="space-y-5 p-5">
          <div className="flex items-start justify-between gap-3">
            <div>
              <h3 className="text-base font-bold">{row.label}</h3>
              <p className="mt-0.5 text-xs text-[var(--muted)]">
                {row.account === "system" ? "ارسال از سامانه هلدینگ" : "ارسال از سامانه مدرسه"}
                {" · "}
                {row.group || "سایر"}
              </p>
            </div>
            <label className="inline-flex items-center gap-2 text-sm">
              <span className="text-slate-600">فعال</span>
              <button
                type="button"
                role="switch"
                aria-checked={draft.enabled}
                disabled={readOnly}
                onClick={() => onChange({ enabled: !draft.enabled })}
                className={`relative h-6 w-11 rounded-full transition disabled:opacity-50 ${
                  draft.enabled ? "bg-primary" : "bg-slate-300"
                }`}
              >
                <span
                  className={`absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition ${
                    draft.enabled ? "end-0.5" : "start-0.5"
                  }`}
                />
              </button>
            </label>
          </div>

          <div>
            <div className="mb-2 text-sm font-medium">ارسال در این پلتفرم‌ها</div>
            <div className="flex flex-wrap gap-x-5 gap-y-2 text-sm">
              {channels.map((channel) => (
                <label key={channel.key} className="inline-flex items-center gap-2">
                  <input
                    type="checkbox"
                    className="h-4 w-4 rounded border-slate-300 text-primary focus:ring-primary"
                    checked={draft.channels.includes(channel.key)}
                    disabled={readOnly}
                    onChange={() => onToggleChannel(channel.key)}
                  />
                  {channel.label}
                  {channel.via === "internal_social" || channel.family === "internal" ? (
                    <span className="text-xs text-slate-500">(کانال شخصی)</span>
                  ) : null}
                </label>
              ))}
            </div>
          </div>

          <div className="space-y-2">
            <div className="text-sm font-medium">متن پیامک</div>
            <textarea
              rows={5}
              value={smsText}
              disabled={readOnly}
              onChange={(e) => onChange({ sms_body: e.target.value, body: e.target.value })}
              className="w-full rounded-xl border border-[var(--border)] bg-white px-3.5 py-2.5 text-sm outline-none transition focus:border-primary focus:ring-2 ring-primary disabled:bg-slate-50"
            />
            <div className="flex flex-wrap items-center justify-between gap-2">
              <PlaceholderChips
                placeholders={row.placeholders}
                disabled={readOnly}
                onInsert={(placeholder) => onInsertPlaceholder(placeholder, "sms_body")}
              />
              <div className="text-xs text-[var(--muted)]">
                {stats.chars.toLocaleString("fa-IR")} کاراکتر | {stats.segments.toLocaleString("fa-IR")} پیامک
              </div>
            </div>
          </div>

          <div className="space-y-2">
            <div className="text-sm font-medium">متن سفیر بله / تلگرام / واتساپ / ایمیل</div>
            <textarea
              rows={5}
              value={messengerText}
              disabled={readOnly}
              onChange={(e) => onChange({ messenger_body: e.target.value })}
              className="w-full rounded-xl border border-[var(--border)] bg-white px-3.5 py-2.5 text-sm outline-none transition focus:border-primary focus:ring-2 ring-primary disabled:bg-slate-50"
            />
            <PlaceholderChips
              placeholders={row.placeholders}
              disabled={readOnly}
              onInsert={(placeholder) => onInsertPlaceholder(placeholder, "messenger_body")}
            />
          </div>

          <div className="space-y-2">
            <div className="text-sm font-medium">عکس پیام‌رسان</div>
            {imageUrl ? (
              <div className="flex flex-wrap items-center gap-3 rounded-xl border border-dashed border-slate-300 p-3">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={imageUrl} alt="" className="h-20 w-20 rounded-lg object-cover" />
                <div className="min-w-0 flex-1 text-xs text-[var(--muted)]">
                  {draft.media[0]?.name || "تصویر پیوست"}
                </div>
                <Button type="button" variant="secondary" disabled={readOnly} onClick={() => onChange({ media: [] })}>
                  حذف عکس
                </Button>
              </div>
            ) : (
              <label
                onDragOver={(e) => {
                  e.preventDefault();
                  if (!readOnly) setDragOver(true);
                }}
                onDragLeave={() => setDragOver(false)}
                onDrop={(e) => {
                  e.preventDefault();
                  setDragOver(false);
                  acceptFile(e.dataTransfer.files[0]);
                }}
                className={`flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed px-4 py-8 text-center transition ${
                  dragOver ? "border-primary bg-primary/5" : "border-slate-300 bg-slate-50/70"
                } ${readOnly ? "cursor-not-allowed opacity-60" : "hover:border-primary/50"}`}
              >
                <svg viewBox="0 0 24 24" className="h-8 w-8 text-slate-400" fill="none" stroke="currentColor" strokeWidth="1.6">
                  <path d="M12 16V4m0 0l-4 4m4-4l4 4" strokeLinecap="round" strokeLinejoin="round" />
                  <path d="M4 16.5V18a2 2 0 002 2h12a2 2 0 002-2v-1.5" strokeLinecap="round" />
                </svg>
                <div className="text-sm text-slate-600">برای آپلود کلیک کنید یا فایل را بکشید</div>
                <div className="text-xs text-[var(--muted)]">فرمت مجاز: JPG, PNG — حداکثر ۵ مگابایت</div>
                <input
                  type="file"
                  accept="image/jpeg,image/png,image/webp"
                  className="hidden"
                  disabled={readOnly || uploading}
                  onChange={(e) => {
                    const file = e.target.files?.[0];
                    e.target.value = "";
                    acceptFile(file);
                  }}
                />
              </label>
            )}
            {fileError ? <p className="text-xs text-red-600">{fileError}</p> : null}
            <p className="text-xs text-[var(--muted)]">
              این تصویر فقط همراه پیام سفیر بله، تلگرام و واتساپ ارسال می‌شود.
              {!messengerSelected ? " برای ارسال عکس حداقل یکی از این پلتفرم‌ها را انتخاب کنید." : ""}
            </p>
          </div>

          <div className="flex flex-wrap items-end justify-between gap-4 border-t border-[var(--border)] pt-4">
            {canApplyAll ? (
              <label className="inline-flex max-w-md items-start gap-2 text-sm">
                <input
                  type="checkbox"
                  className="mt-0.5 h-4 w-4 rounded border-slate-300 text-primary"
                  checked={Boolean(draft.apply_to_all_schools)}
                  onChange={(e) => onChange({ apply_to_all_schools: e.target.checked })}
                />
                <span>
                  اعمال این تغییر در همه مدارس
                  <span className="mt-0.5 block text-xs font-normal text-[var(--muted)]">
                    قالب پیش‌فرض «{row.label}» روی مدارس موجود هم به‌روزرسانی می‌شود.
                  </span>
                </span>
              </label>
            ) : (
              <span />
            )}
            {readOnly ? (
              <p className="text-xs text-[var(--muted)]">این قالب فقط توسط مدیر هلدینگ ویرایش می‌شود.</p>
            ) : (
              <Button onClick={onSave} disabled={saving || uploading} className="min-w-40">
                ذخیره این قالب
              </Button>
            )}
          </div>
        </div>

        <aside className="border-t border-[var(--border)] bg-slate-50/80 p-5 lg:border-t-0 lg:border-s">
          <div className="space-y-5 lg:sticky lg:top-4">
            <section>
              <h4 className="mb-3 text-sm font-bold">پیش‌نمایش پیامک</h4>
              <div className="rounded-2xl bg-[#e8eef3] p-4">
                <div className="max-w-[92%] rounded-2xl rounded-se-md bg-white px-3 py-2.5 text-[13px] leading-6 text-slate-800 shadow-sm">
                  {previewWithChips(smsText, row.placeholders)}
                </div>
                <div className="mt-1 text-[10px] text-slate-500">
                  نمونه: {SAMPLE_VARS.student_name}
                </div>
              </div>
            </section>

            <section>
              <h4 className="mb-3 text-sm font-bold">پیش‌نمایش پیام‌رسان</h4>
              <div className="relative overflow-hidden rounded-2xl bg-[#e6ddd4] p-4">
                <span className="absolute start-3 top-3 text-[10px] font-bold text-[#25D366]">WhatsApp</span>
                <div className="mt-5 ms-auto max-w-[92%] overflow-hidden rounded-2xl rounded-es-md bg-[#d9fdd3] text-[13px] leading-6 text-slate-800 shadow-sm">
                  {imageUrl ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={imageUrl} alt="" className="h-36 w-full object-cover" />
                  ) : (
                    <div className="flex h-28 items-center justify-center bg-slate-200/80 text-xs text-slate-500">
                      عکس پیام اینجا دیده می‌شود
                    </div>
                  )}
                  <div className="px-3 py-2">
                    {previewWithChips(messengerText, row.placeholders)}
                    <div className="mt-1 flex items-center justify-end gap-1 text-[10px] text-slate-500">
                      <span>۱۲:۴۲</span>
                      <svg viewBox="0 0 16 12" className="h-3 w-4 text-sky-500" fill="currentColor">
                        <path d="M11.1 1.2 6.4 7.1 4.6 5.3 3.4 6.5l3 3 6-7.5z" />
                        <path d="M14.2 1.2 9.5 7.1 8.8 6.3 7.6 7.5l1.9 2 6-7.5z" />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </aside>
      </div>
    </article>
  );
}