import { revalidatePath } from 'next/cache';
import { z } from 'zod';
import { prisma } from '@/lib/db';
import { requireUser } from '@/lib/auth';
import { Head } from '@/components/desk/Head';
import { ChangePasswordForm } from '@/components/ResetForms';
import { LogoUpload } from '@/components/LogoUpload';
import { ApiKeyPanel } from '@/components/ApiKeyPanel';
import { logout } from '@/app/(auth)/actions';
async function save(fd: FormData) {
  'use server';
  const u = await requireUser();
  const d = z.object({ name: z.string().min(2).max(60), company: z.string().max(60).optional(), phone: z.string().max(30).optional(),
    brandColor: z.string().regex(/^#[0-9a-fA-F]{6}$/).optional().or(z.literal('')), brandAuto: z.string().optional() }).safeParse(Object.fromEntries(fd));
  if (!d.success) return;
  const brandColor = d.data.brandAuto === 'on' ? null : (d.data.brandColor || null);
  await prisma.user.update({ where: { id: u.id }, data: { name: d.data.name, company: d.data.company || null, phone: d.data.phone || null, brandColor } });
  revalidatePath('/panel');
}
export default async function Ayarlar() {
  const u = await requireUser();
  return (<>
    <Head tag="Hesap" title="Ofis bilgileri" />
    <form action={save} className="space-y-3 border-t border-ink/15 px-4 py-4">
      <p className="text-[13.5px] text-ink-soft">Ofis adı ve telefon, yeni videoların kapanış kartına önceden yazılır.</p>
      <div><label className="label">Ad soyad</label><input name="name" defaultValue={u.name} className="field" required /></div>
      <div><label className="label">Ofis / firma</label><input name="company" defaultValue={u.company || ''} className="field" /></div>
      <div><label className="label">Telefon</label><input name="phone" defaultValue={u.phone || ''} className="field" /></div>
      <div>
        <label className="label">Marka rengi (isteğe bağlı)</label>
        <div className="flex items-center gap-2">
          <input type="color" name="brandColor" defaultValue={u.brandColor || '#FF6A1F'} className="h-10 w-14 cursor-pointer border border-ink/20 bg-white p-0.5" aria-label="Marka rengi" />
          <label className="flex items-center gap-1.5 text-[13px]"><input type="checkbox" name="brandAuto" defaultChecked={!u.brandColor} className="accent-[#FF6A1F]" />Otomatik (logodan)</label>
        </div>
        <p className="mt-1 text-[12.5px] text-ink-soft">Videodaki vurgu rengi ve parsel çizgisi bu renge çekilir. “Otomatik” seçiliyse logonuzdan bulunur.</p>
      </div>
      <div><label className="label">E-posta</label><input disabled value={u.email} className="field" /></div>
      <button className="btn-ink w-full">Kaydet</button>
    </form>
    <section className="border-t border-ink/15 px-4 py-4">
      <div className="tag mb-2">Logo</div>
      <LogoUpload initial={u.logoKey} />
    </section>
    <section className="border-t border-ink/15 px-4 py-4">
      <div className="tag mb-2">API erişimi (geliştirici)</div>
      <ApiKeyPanel hasKey={!!u.apiKey} appUrl={process.env.APP_URL || ''} />
    </section>
    <section className="border-t border-ink/15 px-4 py-4">
      <div className="tag mb-2">Şifre değiştir</div>
      <ChangePasswordForm />
    </section>
    <form action={logout} className="border-t border-ink/15 px-4 py-4"><button className="text-[13.5px] font-semibold underline underline-offset-4">Çıkış yap</button></form>
  </>);
}
