"use client";

import { useMemo, useState } from "react";
import type { MediaFile } from "@/lib/admin/media";
import type { ContentDocuments, ContentKey, LinkContent, PageContent, ServiceContent, TextBlockContent } from "@/lib/content/types";

type Viewport = "desktop" | "tablet" | "mobile";
type ContentTabId = ContentKey | "footer" | "global-seo" | "general-settings";

const tabs: Array<{ id: ContentTabId; key: ContentKey; label: string }> = [
  { id: "home", key: "home", label: "Startseite" },
  { id: "services", key: "services", label: "Leistungen" },
  { id: "radio-service", key: "radio-service", label: "Funkgeräte-Service" },
  { id: "about", key: "about", label: "Über Uns" },
  { id: "contact", key: "contact", label: "Kontakt" },
  { id: "footer", key: "settings", label: "Footer" },
  { id: "global-seo", key: "settings", label: "SEO" },
  { id: "general-settings", key: "settings", label: "Allgemeine Einstellungen" },
];

type Props = {
  initialContent: ContentDocuments;
  mediaFiles: MediaFile[];
};

type ApiResponse<K extends ContentKey> = {
  message?: string;
  content?: ContentDocuments[K];
};

function linesToText(lines: string[]) {
  return lines.join("\n");
}

function textToLines(value: string) {
  return value.split("\n").map((line) => line.trim()).filter(Boolean);
}

function updateLink(link: LinkContent, field: keyof LinkContent, value: string): LinkContent {
  return { ...link, [field]: value };
}

function TextInput({ label, value, onChange }: { label: string; value: string; onChange: (value: string) => void }) {
  return (
    <label>
      {label}
      <input value={value} onChange={(event) => onChange(event.target.value)} />
    </label>
  );
}

function TextArea({ label, value, onChange, rows = 4 }: { label: string; value: string; rows?: number; onChange: (value: string) => void }) {
  return (
    <label>
      {label}
      <textarea rows={rows} value={value} onChange={(event) => onChange(event.target.value)} />
    </label>
  );
}

function ImageSelect({ label, value, mediaFiles, onChange }: { label: string; value: string; mediaFiles: MediaFile[]; onChange: (value: string) => void }) {
  const images = mediaFiles.filter((file) => file.isImage);

  return (
    <label>
      {label}
      <select value={value} onChange={(event) => onChange(event.target.value)}>
        <option value="/funktechnik_schubert_logo.jpg">Standard-Logo</option>
        <option value="/workbench-signal.svg">Standard-Hintergrund</option>
        {images.map((file) => <option key={file.name} value={file.url}>{file.name}</option>)}
      </select>
    </label>
  );
}

function SectionTitle({ children }: { children: string }) {
  return <h3 className="content-editor-heading">{children}</h3>;
}

function BlocksEditor({ blocks, onChange }: { blocks: TextBlockContent[]; onChange: (blocks: TextBlockContent[]) => void }) {
  function update(index: number, field: keyof TextBlockContent, value: string) {
    onChange(blocks.map((block, current) => current === index ? { ...block, [field]: value } : block));
  }

  return (
    <div className="content-repeaters">
      {blocks.map((block, index) => (
        <div key={index} className="content-repeater">
          <TextInput label="Titel" value={block.title} onChange={(value) => update(index, "title", value)} />
          <TextArea label="Text" value={block.text} onChange={(value) => update(index, "text", value)} />
          <button className="button light" type="button" onClick={() => onChange(blocks.filter((_, current) => current !== index))}>Entfernen</button>
        </div>
      ))}
      <button className="button light" type="button" onClick={() => onChange([...blocks, { title: "", text: "" }])}>Block hinzufügen</button>
    </div>
  );
}

function PageFields({ page, mediaFiles, onChange }: { page: PageContent; mediaFiles: MediaFile[]; onChange: (page: PageContent) => void }) {
  return (
    <>
      <SectionTitle>Hero</SectionTitle>
      <div className="content-field-grid">
        <TextInput label="Titel" value={page.title} onChange={(value) => onChange({ ...page, title: value })} />
        <TextInput label="Untertitel" value={page.subtitle} onChange={(value) => onChange({ ...page, subtitle: value })} />
        <TextInput label="Eyebrow" value={page.eyebrow} onChange={(value) => onChange({ ...page, eyebrow: value })} />
        <TextArea label="Hero Text" value={page.heroText} onChange={(value) => onChange({ ...page, heroText: value })} />
      </div>
      <SectionTitle>Inhalt</SectionTitle>
      <TextArea label="Einleitung" value={page.intro} onChange={(value) => onChange({ ...page, intro: value })} />
      <TextArea label="Listenpunkte, eine Zeile pro Eintrag" value={linesToText(page.list)} onChange={(value) => onChange({ ...page, list: textToLines(value) })} />
      <BlocksEditor blocks={page.paragraphs} onChange={(paragraphs) => onChange({ ...page, paragraphs })} />
      <SectionTitle>Call-To-Action</SectionTitle>
      <div className="content-field-grid">
        <TextInput label="CTA Text" value={page.cta.text} onChange={(value) => onChange({ ...page, cta: { ...page.cta, text: value } })} />
        <TextInput label="Button 1 Text" value={page.cta.primary.label} onChange={(value) => onChange({ ...page, cta: { ...page.cta, primary: updateLink(page.cta.primary, "label", value) } })} />
        <TextInput label="Button 1 Link" value={page.cta.primary.href} onChange={(value) => onChange({ ...page, cta: { ...page.cta, primary: updateLink(page.cta.primary, "href", value) } })} />
        <TextInput label="Button 2 Text" value={page.cta.secondary.label} onChange={(value) => onChange({ ...page, cta: { ...page.cta, secondary: updateLink(page.cta.secondary, "label", value) } })} />
        <TextInput label="Button 2 Link" value={page.cta.secondary.href} onChange={(value) => onChange({ ...page, cta: { ...page.cta, secondary: updateLink(page.cta.secondary, "href", value) } })} />
      </div>
      <SectionTitle>SEO</SectionTitle>
      <div className="content-field-grid">
        <TextInput label="Meta Title" value={page.seo.metaTitle} onChange={(value) => onChange({ ...page, seo: { ...page.seo, metaTitle: value } })} />
        <TextInput label="Meta Description" value={page.seo.metaDescription} onChange={(value) => onChange({ ...page, seo: { ...page.seo, metaDescription: value } })} />
        <TextInput label="Keywords" value={page.seo.keywords} onChange={(value) => onChange({ ...page, seo: { ...page.seo, keywords: value } })} />
        <TextInput label="OpenGraph Titel" value={page.seo.openGraphTitle} onChange={(value) => onChange({ ...page, seo: { ...page.seo, openGraphTitle: value } })} />
        <TextInput label="OpenGraph Beschreibung" value={page.seo.openGraphDescription} onChange={(value) => onChange({ ...page, seo: { ...page.seo, openGraphDescription: value } })} />
        <ImageSelect label="Social Image" value={page.seo.socialImage} mediaFiles={mediaFiles} onChange={(value) => onChange({ ...page, seo: { ...page.seo, socialImage: value } })} />
        <TextInput label="Canonical URL" value={page.seo.canonicalUrl} onChange={(value) => onChange({ ...page, seo: { ...page.seo, canonicalUrl: value } })} />
      </div>
    </>
  );
}

function ServicesEditor({ services, onChange }: { services: ServiceContent[]; onChange: (services: ServiceContent[]) => void }) {
  function update(index: number, field: keyof ServiceContent, value: string | number | boolean) {
    onChange(services.map((service, current) => current === index ? { ...service, [field]: value } : service));
  }

  return (
    <div className="content-repeaters">
      {services.map((service, index) => (
        <div key={index} className="content-repeater">
          <div className="content-field-grid">
            <TextInput label="Titel" value={service.title} onChange={(value) => update(index, "title", value)} />
            <TextInput label="Icon" value={service.icon} onChange={(value) => update(index, "icon", value)} />
            <label>
              Sortierung
              <input type="number" value={service.sortOrder} onChange={(event) => update(index, "sortOrder", Number(event.target.value))} />
            </label>
            <label className="admin-checkbox">
              <input type="checkbox" checked={service.visible} onChange={(event) => update(index, "visible", event.target.checked)} />
              Einblenden
            </label>
          </div>
          <TextArea label="Beschreibung" value={service.description} onChange={(value) => update(index, "description", value)} />
          <button className="button light" type="button" onClick={() => onChange(services.filter((_, current) => current !== index))}>Leistung entfernen</button>
        </div>
      ))}
      <button className="button light" type="button" onClick={() => onChange([...services, { title: "", description: "", icon: "radio", sortOrder: services.length * 10 + 10, visible: true }])}>Leistung hinzufügen</button>
    </div>
  );
}

export default function ContentManager({ initialContent, mediaFiles }: Props) {
  const [content, setContent] = useState(initialContent);
  const [activeTab, setActiveTab] = useState<ContentTabId>("home");
  const [viewport, setViewport] = useState<Viewport>("desktop");
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [pending, setPending] = useState(false);

  const active = tabs.find((tab) => tab.id === activeTab)?.key ?? "home";
  const current = content[active];
  const activeLabel = useMemo(() => tabs.find((tab) => tab.id === activeTab)?.label ?? active, [active, activeTab]);

  function update<K extends ContentKey>(key: K, value: ContentDocuments[K]) {
    setContent((previous) => ({ ...previous, [key]: value }));
  }

  async function save() {
    setPending(true);
    setMessage("");
    setError("");

    try {
      const response = await fetch("/api/admin/content", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ key: active, content: current }),
      });
      const result = await response.json() as ApiResponse<typeof active>;
      if (!response.ok || !result.content) throw new Error(result.message ?? "Inhalt konnte nicht gespeichert werden.");
      update(active, result.content);
      setMessage(result.message ?? "Inhalt gespeichert.");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Inhalt konnte nicht gespeichert werden.");
    } finally {
      setPending(false);
    }
  }

  const pagePreview = "title" in current ? current : content.home;

  return (
    <div className="content-manager">
      {message && <p className="success admin-message">{message}</p>}
      {error && <p className="error admin-message">{error}</p>}
      <section className="admin-card content-editor-layout">
        <aside className="content-tabs" aria-label="Website-Inhalte">
          {tabs.map((tab, index) => (
            <button key={`${tab.label}-${index}`} type="button" aria-current={activeTab === tab.id ? "page" : undefined} onClick={() => setActiveTab(tab.id)}>
              {tab.label}
            </button>
          ))}
        </aside>
        <div className="content-editor">
          <div className="content-editor-top">
            <div>
              <p className="eyebrow">Editor</p>
              <h2>{activeLabel}</h2>
            </div>
            <button className="button" type="button" onClick={save} disabled={pending}>{pending ? "Speichert..." : "Speichern"}</button>
          </div>

          {"title" in current && (
            <PageFields page={current} mediaFiles={mediaFiles} onChange={(value) => update(active, value as ContentDocuments[typeof active])} />
          )}

          {active === "home" && (
            <>
              <SectionTitle>Homepage Builder</SectionTitle>
              <TextArea label="Badges, eine Zeile pro Eintrag" value={linesToText(content.home.badges)} onChange={(value) => update("home", { ...content.home, badges: textToLines(value) })} />
              <h4>3 Featureboxen</h4>
              <BlocksEditor blocks={content.home.features} onChange={(features) => update("home", { ...content.home, features })} />
              <h4>3 Leistungsboxen</h4>
              <BlocksEditor blocks={content.home.services} onChange={(services) => update("home", { ...content.home, services })} />
              <h4>Kundenversprechen</h4>
              <TextInput label="Headline" value={content.home.promise.title} onChange={(value) => update("home", { ...content.home, promise: { ...content.home.promise, title: value } })} />
              <TextArea label="Text" value={content.home.promise.text} onChange={(value) => update("home", { ...content.home, promise: { ...content.home.promise, text: value } })} />
              <TextArea label="Punkte, eine Zeile pro Eintrag" value={linesToText(content.home.promise.bullets)} onChange={(value) => update("home", { ...content.home, promise: { ...content.home.promise, bullets: textToLines(value) } })} />
              <TextArea label="Footer-Text" value={content.home.footerText} onChange={(value) => update("home", { ...content.home, footerText: value })} />
            </>
          )}

          {active === "services" && (
            <>
              <SectionTitle>Leistungen</SectionTitle>
              <ServicesEditor services={content.services.services} onChange={(services) => update("services", { ...content.services, services })} />
            </>
          )}

          {active === "radio-service" && (
            <>
              <SectionTitle>Funkgeräte-Service</SectionTitle>
              <TextArea label="Marken" value={linesToText(content["radio-service"].brands)} onChange={(value) => update("radio-service", { ...content["radio-service"], brands: textToLines(value) })} />
              <TextArea label="Fehlerbilder" value={linesToText(content["radio-service"].symptoms)} onChange={(value) => update("radio-service", { ...content["radio-service"], symptoms: textToLines(value) })} />
              <TextArea label="Ablauf" value={linesToText(content["radio-service"].workflow)} onChange={(value) => update("radio-service", { ...content["radio-service"], workflow: textToLines(value) })} />
              <TextArea label="Messmöglichkeiten" value={linesToText(content["radio-service"].measurements)} onChange={(value) => update("radio-service", { ...content["radio-service"], measurements: textToLines(value) })} />
              <TextArea label="Abgleich" value={content["radio-service"].alignment} onChange={(value) => update("radio-service", { ...content["radio-service"], alignment: value })} />
              <TextArea label="Reparatur" value={content["radio-service"].repair} onChange={(value) => update("radio-service", { ...content["radio-service"], repair: value })} />
            </>
          )}

          {active === "about" && (
            <>
              <SectionTitle>Über Uns</SectionTitle>
              <TextArea label="Firmenbeschreibung" value={content.about.companyDescription} onChange={(value) => update("about", { ...content.about, companyDescription: value })} />
              <TextArea label="Werkstattbeschreibung" value={content.about.workshopDescription} onChange={(value) => update("about", { ...content.about, workshopDescription: value })} />
              <TextArea label="Philosophie" value={content.about.philosophy} onChange={(value) => update("about", { ...content.about, philosophy: value })} />
            </>
          )}

          {active === "contact" && (
            <>
              <SectionTitle>Kontaktinformationen</SectionTitle>
              <div className="content-field-grid">
                <TextInput label="Telefon" value={content.contact.phone} onChange={(value) => update("contact", { ...content.contact, phone: value })} />
                <TextInput label="E-Mail" value={content.contact.email} onChange={(value) => update("contact", { ...content.contact, email: value })} />
                <TextInput label="Adresse" value={content.contact.address} onChange={(value) => update("contact", { ...content.contact, address: value })} />
                <TextInput label="Öffnungszeiten" value={content.contact.openingHours} onChange={(value) => update("contact", { ...content.contact, openingHours: value })} />
                <TextInput label="Google Maps Link" value={content.contact.googleMapsLink} onChange={(value) => update("contact", { ...content.contact, googleMapsLink: value })} />
              </div>
            </>
          )}

          {activeTab === "footer" && (
            <>
              <SectionTitle>Footer und Einstellungen</SectionTitle>
              <div className="content-field-grid">
                <ImageSelect label="Logo" value={content.settings.logoUrl} mediaFiles={mediaFiles} onChange={(value) => update("settings", { ...content.settings, logoUrl: value })} />
                <TextInput label="Copyright" value={content.settings.copyright} onChange={(value) => update("settings", { ...content.settings, copyright: value })} />
              </div>
              <TextArea label="Kurztext" value={content.settings.footerShortText} onChange={(value) => update("settings", { ...content.settings, footerShortText: value })} />
            </>
          )}

          {activeTab === "global-seo" && (
            <>
              <SectionTitle>Globale SEO</SectionTitle>
              <div className="content-field-grid">
                <TextInput label="Meta Title" value={content.settings.seo.metaTitle} onChange={(value) => update("settings", { ...content.settings, seo: { ...content.settings.seo, metaTitle: value } })} />
                <TextInput label="Meta Description" value={content.settings.seo.metaDescription} onChange={(value) => update("settings", { ...content.settings, seo: { ...content.settings.seo, metaDescription: value } })} />
                <ImageSelect label="Social Image" value={content.settings.seo.socialImage} mediaFiles={mediaFiles} onChange={(value) => update("settings", { ...content.settings, seo: { ...content.settings.seo, socialImage: value } })} />
              </div>
            </>
          )}

          {activeTab === "general-settings" && (
            <>
              <SectionTitle>Allgemeine Einstellungen</SectionTitle>
              <div className="content-field-grid">
                <TextInput label="Site Name" value={content.settings.siteName} onChange={(value) => update("settings", { ...content.settings, siteName: value })} />
                <TextInput label="Header CTA Text" value={content.settings.headerCta.label} onChange={(value) => update("settings", { ...content.settings, headerCta: updateLink(content.settings.headerCta, "label", value) })} />
                <TextInput label="Header CTA Link" value={content.settings.headerCta.href} onChange={(value) => update("settings", { ...content.settings, headerCta: updateLink(content.settings.headerCta, "href", value) })} />
              </div>
            </>
          )}
        </div>
      </section>

      <section className="admin-card content-preview-card">
        <div className="content-preview-toolbar">
          <h2>Live Preview</h2>
          <div>
            {(["desktop", "tablet", "mobile"] as const).map((item) => (
              <button key={item} type="button" aria-current={viewport === item ? "true" : undefined} onClick={() => setViewport(item)}>{item}</button>
            ))}
          </div>
        </div>
        <div className={`content-preview ${viewport}`}>
          <p className="eyebrow">{pagePreview.eyebrow}</p>
          <h1>{pagePreview.title}</h1>
          <p className="lead">{pagePreview.subtitle}</p>
          <p>{pagePreview.heroText}</p>
          <div className="hero-actions">
            <span className="button">{pagePreview.cta.primary.label}</span>
            <span className="button light">{pagePreview.cta.secondary.label}</span>
          </div>
        </div>
      </section>
    </div>
  );
}