import { Save } from "lucide-react";
import {
  Checkbox,
  Field,
  FormActions,
  FormShell,
  GhostLink,
  PageHeader,
  PrimaryButton,
  Textarea,
} from "@/components/admin/form";
import { MediaPicker } from "@/components/admin/media-picker";
import { RichEditor } from "@/components/admin/rich-editor";
import { saveSolution } from "@/lib/admin-actions";
import type { FaqItem, SolutionRow } from "@/lib/types";

const ICON_OPTIONS = [
  "Globe",
  "ShoppingCart",
  "Smartphone",
  "Code2",
  "Users",
  "TrendingUp",
  "Share2",
  "Megaphone",
  "Layers",
];

function faqToText(items?: string[] | null): string {
  if (!items) return "";
  const parsed: FaqItem[] = [];
  for (const raw of items) {
    try {
      const obj = JSON.parse(raw) as Partial<FaqItem>;
      if (obj.q && obj.a) parsed.push({ q: obj.q, a: obj.a });
    } catch {
      /* ignore */
    }
  }
  return parsed.map((it) => `${it.q}\n${it.a}`).join("\n---\n");
}

export function SolutionForm({ solution }: { solution?: SolutionRow }) {
  return (
    <div>
      <PageHeader
        title={solution ? "Çözümü düzenle" : "Yeni çözüm"}
        backHref="/admin/cozumler"
      />
      <form action={saveSolution}>
        {solution && <input type="hidden" name="id" value={solution.$id} />}
        <FormShell>
          <div className="grid gap-5 md:grid-cols-2">
            <Field label="Başlık" name="title" required defaultValue={solution?.title} />
            <Field label="Slug" name="slug" defaultValue={solution?.slug} />
            <Field
              label="Sıra"
              name="order"
              type="number"
              defaultValue={solution?.order ?? 0}
            />
            <label className="block">
              <span className="text-sm font-medium text-[var(--navy)]">İkon</span>
              <select
                name="icon"
                defaultValue={solution?.icon ?? "Layers"}
                className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
              >
                {ICON_OPTIONS.map((i) => (
                  <option key={i} value={i}>
                    {i}
                  </option>
                ))}
              </select>
            </label>
            <MediaPicker
              label="Hero görsel"
              name="hero_image"
              defaultValue={solution?.hero_image}
              help="Detay sayfasının üst kısmında gösterilir (opsiyonel)."
            />
          </div>

          <div className="mt-5 space-y-5">
            <Textarea
              label="Kısa açıklama (kart için)"
              name="description"
              required
              defaultValue={solution?.description}
              rows={3}
              help="Listede ve anasayfa kartında gösterilir."
            />

            <div>
              <span className="text-sm font-medium text-[var(--navy)]">
                Detay içerik
              </span>
              <div className="mt-1.5">
                <RichEditor
                  name="content"
                  defaultValue={solution?.content}
                  placeholder="Çözümün detaylarını anlatın… `/` ile blok ekleyin"
                />
              </div>
              <p className="mt-1 text-xs text-[var(--muted)]">
                Çözüm detay sayfasında ana içerik olarak gösterilir.
              </p>
            </div>

            <Textarea
              label="Özellikler"
              name="features"
              defaultValue={solution?.features?.join(", ")}
              rows={3}
              placeholder="Uçtan uca kurulum, Eğitim ve devir, 1 yıl destek, …"
              help="Virgülle ayırın. Detay sayfasında checklist olarak gösterilir."
            />

            <Textarea
              label="SSS"
              name="faq"
              defaultValue={faqToText(solution?.faq)}
              rows={8}
              placeholder={
                "Soru 1?\nCevap 1 burada.\n---\nSoru 2?\nCevap 2 burada."
              }
              help="Her soru/cevap blokunu '---' ile ayırın. İlk satır soru, kalanı cevap."
            />
          </div>

          <div className="mt-5">
            <Checkbox
              label="Öne çıkar (Anasayfada göster)"
              name="featured"
              defaultChecked={solution?.featured ?? false}
            />
          </div>
          <FormActions>
            <GhostLink href="/admin/cozumler">İptal</GhostLink>
            <PrimaryButton>
              <Save className="size-4" /> Kaydet
            </PrimaryButton>
          </FormActions>
        </FormShell>
      </form>
    </div>
  );
}