'use client';

import { useId, useRef, useState } from 'react';
import { Bell, ChevronDown, ImagePlus } from 'lucide-react';
import { cn } from '@/lib/utils';

const floatingInputClass =
  'peer block h-14 w-full appearance-none rounded-full border border-gray-500/20 bg-transparent px-3.5 py-4 text-sm text-light-primary-text focus:border-primary focus:outline-none focus:ring-0 dark:border-white/15 dark:text-zinc-100 dark:focus:border-primary-light';

const floatingLabelClass =
  'absolute start-1 left-3.5 z-10 origin-left cursor-text bg-white px-1 text-sm text-primary duration-300 transform -translate-y-4 scale-75 top-2 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:text-light-disabled-text peer-placeholder-shown:bg-transparent peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:bg-white peer-focus:px-1 peer-focus:text-primary dark:bg-zinc-900 dark:peer-focus:bg-zinc-900 dark:peer-placeholder-shown:bg-transparent';

function FloatingField({
  id,
  label,
  type = 'text',
  defaultValue,
  className,
}: {
  id: string;
  label: string;
  type?: string;
  defaultValue?: string;
  className?: string;
}) {
  return (
    <div className={cn('relative', className)}>
      <input
        id={id}
        type={type}
        defaultValue={defaultValue}
        placeholder=" "
        className={floatingInputClass}
        autoComplete={type === 'password' ? 'current-password' : undefined}
      />
      <label htmlFor={id} className={floatingLabelClass}>
        {label}
      </label>
    </div>
  );
}

function FloatingCountrySelect({ id }: { id: string }) {
  return (
    <div className="relative">
      <div className="relative w-full overflow-hidden rounded-full border border-gray-500/20 bg-transparent transition-colors focus-within:border-primary focus-within:ring-0 dark:border-white/15">
        <select
          id={id}
          defaultValue="tr"
          className="h-14 w-full cursor-pointer appearance-none border-none bg-transparent py-4 pl-3.5 pr-10 text-sm leading-5 text-light-primary-text focus:outline-none dark:text-zinc-100"
        >
          <option value="tr">Türkiye</option>
          <option value="us">United States</option>
          <option value="de">Germany</option>
        </select>
        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
          <ChevronDown className="size-5 text-light-secondary-text" strokeWidth={2} aria-hidden />
        </span>
      </div>
      <label
        htmlFor={id}
        className="pointer-events-none absolute start-1 left-3.5 top-2 z-10 origin-left -translate-y-4 scale-75 cursor-text bg-white px-1 text-sm text-primary transition-all duration-300 dark:bg-zinc-900"
      >
        Ülke
      </label>
    </div>
  );
}

function NotificationSwitch({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
      className={cn(
        'flex h-3.5 w-[2.125rem] shrink-0 cursor-pointer items-center rounded-full px-0.5 transition-colors duration-200 ease-in-out focus:outline-none',
        checked ? 'justify-end bg-primary/30' : 'justify-start bg-gray-300/80 dark:bg-zinc-600',
      )}
    >
      <span
        className={cn(
          'size-5 shrink-0 rounded-full shadow transition-colors duration-200',
          checked ? 'bg-primary' : 'bg-white dark:bg-zinc-200',
        )}
      />
    </button>
  );
}

const notificationAccentClasses = [
  'bg-accent-1/60',
  'bg-accent-2/60',
  'bg-accent-3/60',
  'bg-accent-4/60',
  'bg-accent-5/60',
  'bg-accent-7/60',
] as const;

function UserPhotoDropzone() {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div className="h-full w-full">
      <input ref={inputRef} type="file" accept=".jpeg,.jpg,.png,.gif" className="hidden" />
      <button
        type="button"
        onClick={() => inputRef.current?.click()}
        className="group relative flex h-full min-h-[200px] w-full cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-gray-500/30 bg-white p-6 text-center transition-colors hover:bg-gray-50 dark:border-white/20 dark:bg-zinc-900/40 dark:hover:bg-zinc-800/50"
      >
        <div className="flex flex-col items-center gap-4">
          <div className="flex size-10 items-center justify-center rounded-full text-light-primary-text dark:text-zinc-200">
            <ImagePlus className="size-10" strokeWidth={1.25} />
          </div>
          <div className="space-y-1">
            <p className="text-sm font-semibold text-light-secondary-text dark:text-zinc-400">Profil fotoğrafı</p>
            <p className="text-xs text-light-secondary-text dark:text-zinc-500">
              *.jpeg, *.jpg, *.png, *.gif
              <br />
              En fazla 3.1 MB
            </p>
          </div>
        </div>
      </button>
    </div>
  );
}

const SETTINGS_TABS = [
  { id: 'general', label: 'Genel' },
  { id: 'shop', label: 'Mağaza' },
  { id: 'seo', label: 'SEO' },
  { id: 'payment', label: 'Ödeme API' },
  { id: 'maintain', label: 'Bakım' },
] as const;

export function PlatformSettingsGeneral() {
  const baseId = useId().replace(/:/g, '');
  const [activeTab, setActiveTab] = useState<(typeof SETTINGS_TABS)[number]['id']>('general');
  const [notifOn, setNotifOn] = useState([true, true, true, true, true, true]);

  return (
    <div className="space-y-4">
      <div>
        <h1 className="text-2xl font-bold text-light-primary-text dark:text-white">Ayarlar</h1>
        <nav className="mt-4 flex flex-wrap gap-6 border-b border-gray-500/15 dark:border-white/10" aria-label="Ayarlar sekmeleri">
          {SETTINGS_TABS.map((tab) => {
            const isActive = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                type="button"
                onClick={() => setActiveTab(tab.id)}
                className={cn(
                  '-mb-px border-b-2 pb-3 text-sm font-semibold transition-colors',
                  isActive
                    ? 'border-primary text-primary'
                    : 'border-transparent text-light-secondary-text hover:text-light-primary-text dark:text-zinc-400 dark:hover:text-zinc-200',
                )}
              >
                {tab.label}
              </button>
            );
          })}
        </nav>
      </div>

      {activeTab === 'general' ? (
        <>
          <div className="rounded-2xl border border-gray-500/20 bg-white p-6 dark:border-white/10 dark:bg-zinc-900/60">
            <h2 className="mb-6 text-lg font-bold leading-7 text-light-primary-text dark:text-white">
              Kişisel bilgiler
            </h2>
            <div className="flex flex-col gap-6 xl:flex-row">
              <div className="w-full shrink-0 xl:aspect-square xl:w-[376px]">
                <UserPhotoDropzone />
              </div>
              <div className="grid w-full grid-cols-1 gap-x-6 gap-y-4 lg:grid-cols-2">
                <FloatingField id={`${baseId}-name`} label="Ad Soyad" defaultValue="Ayşe Yılmaz" />
                <FloatingField id={`${baseId}-email`} label="E-posta" type="email" defaultValue="ornek@vidikid.com" />
                <FloatingField id={`${baseId}-phone`} label="Telefon" defaultValue="+90 532 000 00 00" />
                <FloatingCountrySelect id={`${baseId}-country`} />
                <FloatingField id={`${baseId}-state`} label="İl / Eyalet" defaultValue="İstanbul" />
                <FloatingField id={`${baseId}-city`} label="İlçe / Şehir" defaultValue="Kadıköy" />
                <FloatingField id={`${baseId}-address`} label="Adres" defaultValue="Örnek Mah. No:1" />
                <FloatingField id={`${baseId}-zip`} label="Posta kodu" defaultValue="34000" />
                <FloatingField id={`${baseId}-company`} label="Kurum" defaultValue="Vidikid Kreş" />
                <FloatingField id={`${baseId}-role`} label="Rol" defaultValue="Yönetici" />
              </div>
            </div>
          </div>

          <div className="rounded-2xl border border-gray-500/20 bg-white p-4 sm:p-6 dark:border-white/10 dark:bg-zinc-900/60">
            <h3 className="mb-4 text-lg font-bold text-light-primary-text sm:mb-6 dark:text-white">Bildirimler</h3>
            <div className="grid grid-cols-1 gap-4 sm:gap-6 lg:grid-cols-2 2xl:grid-cols-3">
              {notificationAccentClasses.map((bg, i) => (
                <div key={i} className={cn('relative rounded-2xl p-4', bg)}>
                  <div className="flex items-start justify-between gap-5 sm:gap-10">
                    <div className="flex flex-col gap-4 sm:flex-row sm:pr-20">
                      <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-white dark:bg-zinc-800">
                        <Bell className="size-6 text-light-primary-text dark:text-zinc-200" strokeWidth={1.5} />
                      </div>
                      <div>
                        <h4 className="mb-2 text-base font-bold text-light-primary-text dark:text-white">
                          Bildirim başlığı
                        </h4>
                        <p className="text-sm leading-[1.375rem] text-light-secondary-text dark:text-zinc-400">
                          Teslimat genellikle konumunuza ve seçtiğiniz yönteme göre 2–5 iş günü sürer.
                        </p>
                      </div>
                    </div>
                    <div className="absolute right-4 top-4">
                      <NotificationSwitch checked={notifOn[i]!} onChange={(v) => setNotifOn((prev) => prev.map((x, j) => (j === i ? v : x)))} />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-2xl border border-gray-500/20 bg-white p-6 dark:border-white/10 dark:bg-zinc-900/60">
            <h3 className="mb-6 text-lg font-bold text-light-primary-text dark:text-white">Şifre</h3>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
              <FloatingField id={`${baseId}-old-pw`} label="Mevcut şifre" type="password" />
              <FloatingField id={`${baseId}-new-pw`} label="Yeni şifre" type="password" />
              <FloatingField id={`${baseId}-confirm-pw`} label="Şifre tekrar" type="password" />
            </div>
          </div>

          <div className="flex justify-end gap-4 pt-2">
            <button
              type="button"
              className="inline-flex h-9 cursor-pointer items-center justify-center rounded-full border border-gray-300 px-4 py-1 text-sm font-bold leading-6 text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none disabled:cursor-not-allowed disabled:border-[rgba(145,158,171,0.24)] disabled:text-[rgba(145,158,171,0.80)] dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800"
            >
              İptal
            </button>
            <button
              type="button"
              className="inline-flex h-9 cursor-pointer items-center justify-center rounded-full bg-primary px-4 py-1 text-sm font-bold leading-6 text-white transition-colors hover:bg-primary-dark focus:outline-none disabled:cursor-not-allowed disabled:bg-[rgba(145,158,171,0.24)] disabled:text-[rgba(145,158,171,0.80)]"
            >
              Kaydet
            </button>
          </div>
        </>
      ) : (
        <div className="rounded-2xl border border-gray-500/20 bg-white p-10 text-center text-light-secondary-text dark:border-white/10 dark:bg-zinc-900/60 dark:text-zinc-400">
          Bu sekme yakında eklenecek.
        </div>
      )}
    </div>
  );
}