'use client';

import { useState } from 'react';
import { kirimKomentar } from '@/lib/komentar-actions';

export default function FeedbackSection({ webManager }: { webManager: any }) {
    const [namaKomen, setNamaKomen] = useState('');
    const [isiKomen, setIsiKomen] = useState('');
    const [namaSaran, setNamaSaran] = useState('');
    const [isiSaran, setIsiSaran] = useState('');

    const [isSubmittingKomen, setIsSubmittingKomen] = useState(false);
    const [isSubmittingSaran, setIsSubmittingSaran] = useState(false);
    const [suksesKomen, setSuksesKomen] = useState(false);
    const [suksesSaran, setSuksesSaran] = useState(false);
    const [error, setError] = useState('');

    const handleKomen = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmittingKomen(true);
        setError('');
        try {
            const res = await kirimKomentar({ nama: namaKomen, isi: isiKomen, tipe: 'KOMENTAR' });
            if (res.success) {
                setSuksesKomen(true);
                setNamaKomen('');
                setIsiKomen('');
                setTimeout(() => setSuksesKomen(false), 5000);
            } else {
                setError(res.message);
            }
        } catch {
            setError('Gagal mengirim komentar.');
        } finally {
            setIsSubmittingKomen(false);
        }
    };

    const handleSaran = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsSubmittingSaran(true);
        setError('');
        try {
            const res = await kirimKomentar({ nama: namaSaran, isi: isiSaran, tipe: 'SARAN' });
            if (res.success) {
                setSuksesSaran(true);
                setNamaSaran('');
                setIsiSaran('');
                setTimeout(() => setSuksesSaran(false), 5000);
            } else {
                setError(res.message);
            }
        } catch {
            setError('Gagal mengirim saran.');
        } finally {
            setIsSubmittingSaran(false);
        }
    };

    return (
        <section data-theme="dark" className="w-full py-20 bg-[#07090f] relative overflow-hidden">
            <div className="container mx-auto px-4 relative z-10 max-w-[1200px]">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    
                    {/* Berikan Komentar */}
                    <div className="bg-white/5 border border-white/10 p-6 md:p-8 rounded-3xl backdrop-blur-sm relative group hover:bg-white/[0.07] transition-all">
                        <div className="mb-6">
                            <h3 className="text-xl font-bold text-white tracking-tight">Berikan Komentar</h3>
                        </div>
                        
                        <form onSubmit={handleKomen} className="space-y-4">
                            <div>
                                <input
                                    type="text"
                                    value={namaKomen}
                                    onChange={e => setNamaKomen(e.target.value)}
                                    placeholder="Nama / Inisial..."
                                    required
                                    className="w-full px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none text-sm transition-all"
                                />
                            </div>
                            <div>
                                <textarea
                                    value={isiKomen}
                                    onChange={e => setIsiKomen(e.target.value)}
                                    placeholder="Tulis pendapat atau sanjungan untuk website kami..."
                                    required
                                    rows={3}
                                    className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none text-sm resize-none transition-all"
                                />
                            </div>
                            {suksesKomen ? (
                                <div className="text-emerald-400 text-sm font-medium py-2">Komentar berhasil dikirim!</div>
                            ) : (
                                <button
                                    type="submit"
                                    disabled={isSubmittingKomen}
                                    className="w-full flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-3 rounded-xl transition-colors disabled:opacity-50 text-sm"
                                >
                                    {isSubmittingKomen ? 'Mengirim...' : 'Kirim Komentar'}
                                </button>
                            )}
                        </form>
                    </div>

                    {/* Berikan Saran */}
                    <div className="bg-white/5 border border-white/10 p-6 md:p-8 rounded-3xl backdrop-blur-sm relative group hover:bg-white/[0.07] transition-all">
                        <div className="mb-6">
                            <h3 className="text-xl font-bold text-white tracking-tight">Berikan Saran</h3>
                        </div>
                        
                        <form onSubmit={handleSaran} className="space-y-4">
                            <div>
                                <input
                                    type="text"
                                    value={namaSaran}
                                    onChange={e => setNamaSaran(e.target.value)}
                                    placeholder="Anonim diperbolehkan..."
                                    required
                                    className="w-full px-4 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 outline-none text-sm transition-all"
                                />
                            </div>
                            <div>
                                <textarea
                                    value={isiSaran}
                                    onChange={e => setIsiSaran(e.target.value)}
                                    placeholder="Ada keluhan atau ide fitur baru? Jangan ragu beri tahu kami..."
                                    required
                                    rows={3}
                                    className="w-full px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white placeholder-gray-500 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 outline-none text-sm resize-none transition-all"
                                />
                            </div>
                            {suksesSaran ? (
                                <div className="text-emerald-400 text-sm font-medium py-2">Saran berhasil dikirim!</div>
                            ) : (
                                <button
                                    type="submit"
                                    disabled={isSubmittingSaran}
                                    className="w-full flex items-center justify-center gap-2 bg-pink-600 hover:bg-pink-500 text-white font-semibold py-3 rounded-xl transition-colors disabled:opacity-50 text-sm"
                                >
                                    {isSubmittingSaran ? 'Mengirim...' : 'Kirim Saran'}
                                </button>
                            )}
                        </form>
                    </div>

                    {/* Penanggung Jawab (Full Portrait Style) */}
                    <div className="bg-white/5 border border-white/10 rounded-3xl overflow-hidden relative w-full h-fit">
                        {webManager ? (
                            <>
                                {/* Foto Full (mengikuti rasio asli foto) */}
                                <div className="w-full">
                                    {/* eslint-disable-next-line @next/next/no-img-element */}
                                    <img 
                                        src={webManager.fotoUrl || "https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=2000"} 
                                        alt={webManager.nama} 
                                        className="w-full h-auto object-contain" 
                                    />
                                    {/* Gradient overlay agar teks terlihat */}
                                    <div className="absolute inset-0 bg-gradient-to-t from-[#07090f] via-[#07090f]/40 to-transparent pointer-events-none"></div>
                                </div>
                                
                                {/* Info di atas foto (bottom) */}
                                <div className="absolute bottom-0 left-0 right-0 p-6 flex flex-col justify-end z-10">
                                    <div className="mb-1">
                                        <span className="text-blue-400 text-[10px] font-bold uppercase tracking-widest block mb-1 drop-shadow-md">
                                            Penanggung Jawab Website
                                        </span>
                                        <h4 className="text-white font-bold text-lg md:text-xl leading-tight drop-shadow-md">
                                            {webManager.nama}
                                        </h4>
                                    </div>
                                    <p className="text-gray-200 text-xs leading-relaxed font-medium drop-shadow-md">
                                        {webManager.bidang}
                                    </p>
                                </div>
                            </>
                        ) : (
                            <div className="w-full p-8 flex flex-col items-center justify-center text-center bg-[#07090f]/50 min-h-[300px]">
                                <h4 className="text-white font-bold text-lg leading-tight mb-1">Web Administrator</h4>
                                <p className="text-blue-300 text-xs font-semibold uppercase tracking-wider">HMF FPMIPA UPI</p>
                            </div>
                        )}
                        
                        {/* Error Handling Teks Global */}
                        {error && (
                            <div className="absolute bottom-4 left-4 right-4 bg-red-500/90 text-white text-xs p-2 rounded-lg backdrop-blur-sm z-20">
                                {error}
                            </div>
                        )}
                    </div>
                    
                </div>
            </div>
        </section>
    );
}