import type { Metadata } from "next";
import { Save } from "lucide-react";
import {
  Field,
  FormActions,
  FormShell,
  PageHeader,
  PrimaryButton,
  Textarea,
} from "@/components/admin/form";
import { getSiteSettings } from "@/lib/data";
import { saveSiteSettings } from "@/lib/admin-actions";
import type { StatItem } from "@/lib/types";

export const metadata: Metadata = { title: "Site Ayarları" };

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

function Section({
  title,
  description,
  children,
}: {
  title: string;
  description?: string;
  children: React.ReactNode;
}) {
  return (
    <section className="border-t border-[var(--border)] pt-8 first:border-0 first:pt-0">
      <h2 className="text-base font-semibold text-[var(--navy)]">{title}</h2>
      {description && (
        <p className="mt-1 text-xs text-[var(--muted)]">{description}</p>
      )}
      <div className="mt-5 space-y-5">{children}</div>
    </section>
  );
}

export default async function SiteSettingsPage() {
  const s = await getSiteSettings();

  return (
    <div>
      <PageHeader
        title="Site Ayarları"
        description="Anasayfa içeriği, iletişim bilgileri ve sosyal medya — tek yerden yönet."
      />

      <form action={saveSiteSettings}>
        <FormShell>
          <div className="space-y-10">
            <Section
              title="Hero (anasayfa üst alan)"
              description="İlk açılışta görünen ana başlık ve buton metinleri."
            >
              <Field
                label="Rozet metni"
                name="hero_badge"
                defaultValue={s?.hero_badge}
                placeholder="Kocaeli'nin teknoloji ajansı"
              />
              <Field
                label="Ana başlık"
                name="hero_title"
                defaultValue={s?.hero_title}
              />
              <Textarea
                label="Alt metin"
                name="hero_subtitle"
                rows={2}
                defaultValue={s?.hero_subtitle}
              />
              <div className="grid gap-5 md:grid-cols-2">
                <Field
                  label="Birincil buton metni"
                  name="hero_cta_primary_label"
                  defaultValue={s?.hero_cta_primary_label}
                />
                <Field
                  label="Birincil buton URL"
                  name="hero_cta_primary_href"
                  defaultValue={s?.hero_cta_primary_href}
                  placeholder="/iletisim"
                />
                <Field
                  label="İkincil buton metni"
                  name="hero_cta_secondary_label"
                  defaultValue={s?.hero_cta_secondary_label}
                />
                <Field
                  label="İkincil buton URL"
                  name="hero_cta_secondary_href"
                  defaultValue={s?.hero_cta_secondary_href}
                  placeholder="/hizmetler"
                />
              </div>
              <Textarea
                label="İstatistikler"
                name="hero_stats"
                rows={3}
                defaultValue={statsToText(s?.hero_stats)}
                placeholder={"50+ | Tamamlanan proje\n10+ | Yıllık deneyim\n24/7 | Teknik destek"}
                help='Her satıra "değer | etiket" formatında.'
              />
            </Section>

            <Section
              title="Hizmetler bölümü başlığı"
              description="Anasayfadaki hizmet kartlarının üstündeki yazı."
            >
              <div className="grid gap-5 md:grid-cols-3">
                <Field
                  label="Eyebrow"
                  name="services_eyebrow"
                  defaultValue={s?.services_eyebrow}
                />
                <Field
                  label="Başlık"
                  name="services_title"
                  defaultValue={s?.services_title}
                />
                <Field
                  label="Açıklama"
                  name="services_description"
                  defaultValue={s?.services_description}
                />
              </div>
            </Section>

            <Section
              title="Projeler bölümü başlığı"
              description="Anasayfadaki proje kartlarının üstündeki yazı."
            >
              <div className="grid gap-5 md:grid-cols-3">
                <Field
                  label="Eyebrow"
                  name="projects_eyebrow"
                  defaultValue={s?.projects_eyebrow}
                />
                <Field
                  label="Başlık"
                  name="projects_title"
                  defaultValue={s?.projects_title}
                />
                <Field
                  label="Açıklama"
                  name="projects_description"
                  defaultValue={s?.projects_description}
                />
              </div>
            </Section>

            <Section
              title="Referanslar bölümü başlığı"
              description="Anasayfadaki yorumların üstündeki yazı."
            >
              <div className="grid gap-5 md:grid-cols-3">
                <Field
                  label="Eyebrow"
                  name="testimonials_eyebrow"
                  defaultValue={s?.testimonials_eyebrow}
                />
                <Field
                  label="Başlık"
                  name="testimonials_title"
                  defaultValue={s?.testimonials_title}
                />
                <Field
                  label="Açıklama"
                  name="testimonials_description"
                  defaultValue={s?.testimonials_description}
                />
              </div>
            </Section>

            <Section
              title="Alt CTA bölümü"
              description="Anasayfanın altındaki büyük çağrı bölümü."
            >
              <Field
                label="Başlık"
                name="cta_title"
                defaultValue={s?.cta_title}
              />
              <Textarea
                label="Açıklama"
                name="cta_description"
                rows={2}
                defaultValue={s?.cta_description}
              />
              <div className="grid gap-5 md:grid-cols-2">
                <Field
                  label="Buton metni"
                  name="cta_button_label"
                  defaultValue={s?.cta_button_label}
                />
                <Field
                  label="Buton URL"
                  name="cta_button_href"
                  defaultValue={s?.cta_button_href}
                />
              </div>
            </Section>

            <Section
              title="İletişim bilgileri"
              description="Footer ve iletişim sayfasında gösterilir."
            >
              <div className="grid gap-5 md:grid-cols-2">
                <Field
                  label="Telefon (görünen)"
                  name="contact_phone"
                  defaultValue={s?.contact_phone}
                  placeholder="+90 551 590 29 35"
                />
                <Field
                  label="Telefon (ham — tel: linki için)"
                  name="contact_phone_raw"
                  defaultValue={s?.contact_phone_raw}
                  placeholder="+905515902935"
                />
                <Field
                  label="E-posta"
                  name="contact_email"
                  type="email"
                  defaultValue={s?.contact_email}
                />
                <Field
                  label="Çalışma saatleri (hafta içi)"
                  name="contact_hours_weekday"
                  defaultValue={s?.contact_hours_weekday}
                />
                <Field
                  label="Çalışma saatleri (hafta sonu)"
                  name="contact_hours_weekend"
                  defaultValue={s?.contact_hours_weekend}
                />
              </div>
              <Textarea
                label="Adres"
                name="contact_address"
                rows={2}
                defaultValue={s?.contact_address}
              />
            </Section>

            <Section title="Sosyal medya">
              <div className="grid gap-5 md:grid-cols-2">
                <Field
                  label="LinkedIn URL"
                  name="social_linkedin"
                  type="url"
                  defaultValue={s?.social_linkedin}
                />
                <Field
                  label="Instagram URL"
                  name="social_instagram"
                  type="url"
                  defaultValue={s?.social_instagram}
                />
                <Field
                  label="Twitter / X URL"
                  name="social_twitter"
                  type="url"
                  defaultValue={s?.social_twitter}
                />
                <Field
                  label="Facebook URL"
                  name="social_facebook"
                  type="url"
                  defaultValue={s?.social_facebook}
                />
              </div>
            </Section>

            <Section title="Footer">
              <Textarea
                label="Footer tagline"
                name="footer_tagline"
                rows={2}
                defaultValue={s?.footer_tagline}
                help="Logo altındaki kısa açıklama metni."
              />
            </Section>
          </div>

          <FormActions>
            <PrimaryButton>
              <Save className="size-4" /> Tüm değişiklikleri kaydet
            </PrimaryButton>
          </FormActions>
        </FormShell>
      </form>
    </div>
  );
}