'use client';

import { useActionState } from 'react';
import { saveSettingsAction, type FormState } from '@/app/admin/actions';
import type { Settings } from '@/lib/types';

const initial: FormState = { status: 'idle' };

export default function SettingsForm({ settings }: { settings: Settings }) {
  const [state, action, pending] = useActionState(saveSettingsAction, initial);

  return (
    <form action={action} className="space-y-5">
      <Section title="Marka">
        <Row>
          <Field name="brand_name" label="Marka adı" defaultValue={settings.brand_name} />
          <Field name="tagline" label="Slogan" defaultValue={settings.tagline} />
        </Row>
      </Section>

      <Section title="Anasayfa üst bölümü">
        <Field name="hero_title" label="Başlık" defaultValue={settings.hero_title} />
        <Field
          name="hero_subtitle"
          label="Alt metin"
          defaultValue={settings.hero_subtitle}
          textarea
          rows={3}
        />
      </Section>

      <Section title="Hakkımızda">
        <Field name="about_title" label="Başlık" defaultValue={settings.about_title} />
        <Field
          name="about_body"
          label="Metin (paragrafları boş satırla ayırın)"
          defaultValue={settings.about_body}
          textarea
          rows={10}
        />
      </Section>

      <Section title="İletişim">
        <Row>
          <Field name="phone" label="Telefon" defaultValue={settings.phone} />
          <Field name="whatsapp" label="WhatsApp numarası" defaultValue={settings.whatsapp} />
        </Row>
        <Row>
          <Field name="email" label="E-posta" defaultValue={settings.email} />
          <Field name="working_hours" label="Çalışma saatleri" defaultValue={settings.working_hours} />
        </Row>
        <Field name="address" label="Adres" defaultValue={settings.address} textarea rows={2} />
        <Field
          name="map_embed_url"
          label="Google Haritalar embed bağlantısı"
          defaultValue={settings.map_embed_url}
          placeholder="https://www.google.com/maps/embed?pb=…"
        />
      </Section>

      <Section title="Sosyal medya">
        <Row>
          <Field name="instagram" label="Instagram" defaultValue={settings.instagram} />
          <Field name="facebook" label="Facebook" defaultValue={settings.facebook} />
        </Row>
      </Section>

      {state.status === 'error' && (
        <p className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">{state.message}</p>
      )}
      {state.status === 'ok' && (
        <p className="rounded-xl bg-green-50 px-4 py-3 text-sm text-green-800">{state.message}</p>
      )}

      <div className="sticky bottom-4 flex justify-end">
        <button type="submit" disabled={pending} className="btn-primary shadow-lift disabled:opacity-60">
        {pending ? 'Kaydediliyor…' : 'Ayarları kaydet'}
      </button>
      </div>
    </form>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="rounded-2xl border border-cocoa-800/10 bg-white p-6">
      <h2 className="font-display text-xl">{title}</h2>
      <div className="mt-5 space-y-5">{children}</div>
    </section>
  );
}

function Row({ children }: { children: React.ReactNode }) {
  return <div className="grid gap-5 sm:grid-cols-2">{children}</div>;
}

function Field({
  name,
  label,
  defaultValue,
  textarea,
  rows = 3,
  placeholder,
}: {
  name: string;
  label: string;
  defaultValue: string;
  textarea?: boolean;
  rows?: number;
  placeholder?: string;
}) {
  return (
    <div>
      <label htmlFor={name} className="field-label">
        {label}
      </label>
      {textarea ? (
        <textarea
          id={name}
          name={name}
          rows={rows}
          defaultValue={defaultValue}
          placeholder={placeholder}
          className="field resize-y"
        />
      ) : (
        <input
          id={name}
          name={name}
          defaultValue={defaultValue}
          placeholder={placeholder}
          className="field"
        />
      )}
    </div>
  );
}