import { Check, Pipette } from 'lucide-react';
import { useAnchoredPanel } from '@/lib/useAnchoredPanel';
import { useCallback, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

export interface ColorPickerProps {
    /** HEX değer — "#3b82f6" formatında. Boş string kabul edilir. */
    value: string;
    onChange: (hex: string) => void;
    /** Boşken gösterilecek metin (HEX input placeholder'ı) */
    placeholder?: string;
    disabled?: boolean;
    /** Zorunlu alan boş bırakıldıysa true — kırmızı border/ring uygulanır */
    error?: boolean;
    /** Değer boşsa kullanılacak varsayılan renk */
    varsayilan?: string;
}

/**
 * Sistem geneli renk seçim aracı.
 *
 * Görünüm: text input gibi çerçeveli kutu
 *   [ ● ]  #3b82f6                    (● = yuvarlak renk swatch'ı, tıklayınca palet açılır)
 *
 * Palet açıldığında ÖNCE HEX alanı gelir (native color input'un HSL/RGB sekmesi yerine).
 * Altında hazır renk paleti + ince ayar için sistem renk seçici bulunur.
 */

/** Hazır palet — Tailwind 500/600 tonları, tanımlama renkleri için uygun */
const PALET: { hex: string; ad: string }[] = [
    { hex: '#ef4444', ad: 'Kırmızı' },
    { hex: '#f97316', ad: 'Turuncu' },
    { hex: '#f59e0b', ad: 'Amber' },
    { hex: '#eab308', ad: 'Sarı' },
    { hex: '#84cc16', ad: 'Lime' },
    { hex: '#22c55e', ad: 'Yeşil' },
    { hex: '#10b981', ad: 'Zümrüt' },
    { hex: '#14b8a6', ad: 'Turkuaz' },
    { hex: '#06b6d4', ad: 'Camgöbeği' },
    { hex: '#0ea5e9', ad: 'Gök Mavisi' },
    { hex: '#3b82f6', ad: 'Mavi' },
    { hex: '#6366f1', ad: 'İndigo' },
    { hex: '#8b5cf6', ad: 'Menekşe' },
    { hex: '#a855f7', ad: 'Mor' },
    { hex: '#d946ef', ad: 'Fuşya' },
    { hex: '#ec4899', ad: 'Pembe' },
    { hex: '#f43f5e', ad: 'Gül' },
    { hex: '#64748b', ad: 'Arduvaz' },
    { hex: '#475569', ad: 'Koyu Gri' },
    { hex: '#1e293b', ad: 'Antrasit' },
];

/** Girilen metni geçerli HEX'e normalize eder. Geçersizse null. */
function hexNormalize(ham: string): string | null {
    let s = ham.trim();
    if (!s) return null;
    if (!s.startsWith('#')) s = '#' + s;
    // #abc → #aabbcc
    if (/^#[0-9a-fA-F]{3}$/.test(s)) {
        s = '#' + s[1] + s[1] + s[2] + s[2] + s[3] + s[3];
    }
    return /^#[0-9a-fA-F]{6}$/.test(s) ? s.toLowerCase() : null;
}

export default function ColorPicker({
    value, onChange, placeholder, disabled, error, varsayilan = '#3b82f6',
}: ColorPickerProps) {
    const [acik, setAcik] = useState(false);
    // HEX input'un yerel taslağı — kullanıcı yazarken geçersiz ara değerler oluşabilir
    const [taslak, setTaslak] = useState(value || '');
    const hexInputRef = useRef<HTMLInputElement>(null);

    // Panel body'e portal edilir (modal overflow'una hapsolmasın, scroll yaratmasın).
    const kapat = useCallback(() => setAcik(false), []);
    const { containerRef, panelRef, panelStil } = useAnchoredPanel(acik && !disabled, kapat, {
        genislik: 268,
        tahminiYukseklik: 330,
    });

    const aktifRenk = hexNormalize(value) ?? varsayilan;

    // Dışarıdan gelen değer değişince taslağı senkronla
    useEffect(() => { setTaslak(value || ''); }, [value]);

    // Palet açılınca HEX alanına odaklan — kullanıcı direktifi: önce HEX gelsin
    useEffect(() => {
        if (acik) {
            const t = setTimeout(() => hexInputRef.current?.select(), 40);
            return () => clearTimeout(t);
        }
    }, [acik]);

    const uygula = (hex: string) => {
        const n = hexNormalize(hex);
        if (n) onChange(n);
    };

    const taslakDegisti = (v: string) => {
        setTaslak(v);
        const n = hexNormalize(v);
        if (n) onChange(n); // geçerli olduğu anda yukarı bildir
    };

    return (
        <div ref={containerRef} className="relative">
            {/* Ana kutu — text input gibi çerçeveli */}
            <div className={`flex h-10 w-full items-center gap-2 rounded-lg border bg-white pl-2 pr-3 transition focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 ${
                error ? 'border-rose-500 ring-1 ring-rose-500' : 'border-slate-300'
            } ${disabled ? 'cursor-not-allowed bg-slate-50' : ''}`}>
                {/* Sol — yuvarlak renk swatch'ı (palet açar) */}
                <button
                    type="button"
                    disabled={disabled}
                    onClick={() => setAcik((a) => !a)}
                    title="Renk seç"
                    aria-label="Renk seç"
                    className="h-6 w-6 flex-shrink-0 rounded-full border border-slate-300 shadow-sm transition hover:scale-110 disabled:cursor-not-allowed disabled:opacity-60"
                    style={{ backgroundColor: aktifRenk }}
                />

                {/* Sağ — HEX kod alanı */}
                <input
                    type="text"
                    value={taslak}
                    onChange={(e) => taslakDegisti(e.target.value)}
                    onBlur={() => {
                        const n = hexNormalize(taslak);
                        setTaslak(n ?? value ?? '');
                    }}
                    onFocus={() => setAcik(true)}
                    disabled={disabled}
                    maxLength={7}
                    placeholder={placeholder ?? varsayilan}
                    className="w-full min-w-0 border-0 bg-transparent p-0 font-mono text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
                />
            </div>

            {/*
              * Palet — HEX önce, altında hazır renkler ve ince ayar.
              * body'e portal ediliyor: modal içindeki overflow alanına hapsolup
              * kırpılmasın ve modalda gereksiz scroll oluşturmasın.
              */}
            {acik && !disabled && typeof document !== 'undefined' && createPortal(
                <div
                    ref={panelRef}
                    style={panelStil}
                    className="fixed z-[200] overflow-hidden rounded-lg border border-slate-200 bg-white shadow-xl"
                >
                    {/* HEX — panelin en üstünde, odaklı */}
                    <div className="border-b border-slate-100 p-3">
                        <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            HEX Kodu
                        </label>
                        <div className="flex items-center gap-2">
                            <span
                                className="h-8 w-8 flex-shrink-0 rounded-full border border-slate-300 shadow-sm"
                                style={{ backgroundColor: aktifRenk }}
                            />
                            <input
                                ref={hexInputRef}
                                type="text"
                                value={taslak}
                                onChange={(e) => taslakDegisti(e.target.value)}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter') { e.preventDefault(); uygula(taslak); setAcik(false); }
                                    if (e.key === 'Escape') { e.preventDefault(); setAcik(false); }
                                }}
                                maxLength={7}
                                placeholder={varsayilan}
                                className="w-full rounded-md border-slate-300 font-mono text-sm uppercase focus:border-blue-500 focus:ring-blue-500"
                            />
                        </div>
                    </div>

                    {/* Hazır palet */}
                    <div className="p-3">
                        <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            Hazır Renkler
                        </div>
                        <div className="grid grid-cols-10 gap-1.5">
                            {PALET.map((p) => {
                                const secili = aktifRenk.toLowerCase() === p.hex.toLowerCase();
                                return (
                                    <button
                                        key={p.hex}
                                        type="button"
                                        title={`${p.ad} — ${p.hex}`}
                                        onClick={() => { uygula(p.hex); setTaslak(p.hex); }}
                                        className={`relative flex h-6 w-6 items-center justify-center rounded-full border shadow-sm transition hover:scale-110 ${
                                            secili ? 'border-slate-900 ring-2 ring-slate-900/20' : 'border-slate-200'
                                        }`}
                                        style={{ backgroundColor: p.hex }}
                                    >
                                        {secili && <Check className="h-3 w-3 text-white drop-shadow" strokeWidth={3} />}
                                    </button>
                                );
                            })}
                        </div>
                    </div>

                    {/* İnce ayar — sistem renk seçici */}
                    <div className="flex items-center gap-2 border-t border-slate-100 bg-slate-50 px-3 py-2">
                        <Pipette className="h-3.5 w-3.5 flex-shrink-0 text-slate-500" />
                        <span className="flex-1 text-[11px] text-slate-600">İnce ayar</span>
                        <input
                            type="color"
                            value={aktifRenk}
                            onChange={(e) => { uygula(e.target.value); setTaslak(e.target.value); }}
                            title="Gelişmiş renk seçici"
                            className="h-6 w-10 cursor-pointer rounded border border-slate-300 bg-white p-0.5"
                        />
                    </div>
                </div>,
                document.body,
            )}
        </div>
    );
}