'use client';

import { useState } from 'react';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { ArrowLeft, Send, Loader2 } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { useCreateForumPost } from '@/hooks/useForum';
import { useUser } from '@/store/auth.store';
import { ForumCategory } from '@/types';

export default function ForumCreatePage() {
  const router = useRouter();
  const user = useUser();
  const createPost = useCreateForumPost();

  const [title, setTitle] = useState('');
  const [category, setCategory] = useState<ForumCategory>('resep');
  const [content, setContent] = useState('');

  // Redirect to login if not authenticated
  if (!user) {
    if (typeof window !== 'undefined') {
      router.replace('/auth/login');
    }
    return (
      <div className="min-h-screen bg-white flex items-center justify-center">
        <Loader2 className="text-[#FFD738] animate-spin" size={48} />
      </div>
    );
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!title.trim()) {
      toast.error('Judul diskusi tidak boleh kosong');
      return;
    }
    if (!content.trim()) {
      toast.error('Konten diskusi tidak boleh kosong');
      return;
    }
    if (title.trim().length < 5) {
      toast.error('Judul diskusi minimal 5 karakter');
      return;
    }
    if (content.trim().length < 20) {
      toast.error('Konten diskusi minimal 20 karakter');
      return;
    }

    createPost.mutate(
      { title: title.trim(), category, content: content.trim() },
      {
        onSuccess: (res) => {
          router.push(`/forum/${res.data.id}`);
        },
      }
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white text-gray-900">
      {/* Header */}
      <section className="border-b border-gray-200 bg-white shadow-sm">
        <div className="container mx-auto px-4 py-6">
          <button
            onClick={() => router.push('/forum')}
            className="flex items-center gap-2 text-gray-600 hover:text-[#FFD738] transition-colors font-bold"
          >
            <ArrowLeft size={20} />
            <span>Kembali ke Forum</span>
          </button>
        </div>
      </section>

      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              className="bg-white rounded-2xl border border-gray-200 shadow-lg overflow-hidden"
            >
              {/* Form Header */}
              <div className="p-8 border-b border-gray-200 bg-gradient-to-r from-yellow-50 to-orange-50">
                <div className="flex items-center gap-4 mb-4">
                  <div className="h-1 w-8 bg-[#FFD738] rounded-full" />
                  <span className="text-[#FFD738] font-bold tracking-[0.2em] uppercase text-xs">
                    Topik Baru
                  </span>
                </div>
                <h1 className="text-3xl md:text-4xl font-black uppercase text-gray-900">
                  Buat <span className="text-[#FFD738]">Diskusi</span>
                </h1>
                <p className="text-gray-600 mt-2">
                  Bagikan pertanyaan, resep, atau pengalaman Anda dengan
                  komunitas
                </p>
              </div>

              {/* Form */}
              <form onSubmit={handleSubmit} className="p-8 space-y-6">
                {/* Title */}
                <div>
                  <label
                    htmlFor="forum-title"
                    className="block text-sm font-black uppercase text-gray-900 mb-2"
                  >
                    Judul Diskusi
                  </label>
                  <input
                    id="forum-title"
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    placeholder="Masukkan judul diskusi..."
                    maxLength={200}
                    className="w-full px-4 py-4 bg-gray-50 border-2 border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:border-[#FFD738] focus:outline-none focus:bg-white transition-all text-lg"
                  />
                  <p className="text-xs text-gray-400 mt-1 text-right">
                    {title.length}/200
                  </p>
                </div>

                {/* Category */}
                <div>
                  <label className="block text-sm font-black uppercase text-gray-900 mb-2">
                    Kategori
                  </label>
                  <div className="flex items-center gap-3">
                    <button
                      type="button"
                      onClick={() => setCategory('resep')}
                      className={`px-6 py-3 rounded-xl font-bold text-sm uppercase transition-all border-2 ${
                        category === 'resep'
                          ? 'bg-[#FFD738] text-white border-[#FFD738] shadow-md'
                          : 'bg-white text-gray-600 border-gray-200 hover:border-[#FFD738] hover:text-gray-900'
                      }`}
                    >
                      🍳 Resep
                    </button>
                    <button
                      type="button"
                      onClick={() => setCategory('komunitas')}
                      className={`px-6 py-3 rounded-xl font-bold text-sm uppercase transition-all border-2 ${
                        category === 'komunitas'
                          ? 'bg-blue-500 text-white border-blue-500 shadow-md'
                          : 'bg-white text-gray-600 border-gray-200 hover:border-blue-500 hover:text-gray-900'
                      }`}
                    >
                      👥 Komunitas
                    </button>
                  </div>
                </div>

                {/* Content */}
                <div>
                  <label
                    htmlFor="forum-content"
                    className="block text-sm font-black uppercase text-gray-900 mb-2"
                  >
                    Konten Diskusi
                  </label>
                  <textarea
                    id="forum-content"
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    placeholder="Tulis konten diskusi Anda secara detail..."
                    className="w-full px-4 py-4 bg-gray-50 border-2 border-gray-200 rounded-xl text-gray-900 placeholder-gray-400 focus:border-[#FFD738] focus:outline-none resize-none focus:bg-white transition-all"
                    rows={8}
                  />
                  <p className="text-xs text-gray-400 mt-1">
                    Minimal 20 karakter
                  </p>
                </div>

                {/* Submit */}
                <div className="flex items-center justify-between flex-wrap gap-4 pt-4 border-t border-gray-200">
                  <button
                    type="button"
                    onClick={() => router.push('/forum')}
                    className="px-6 py-3 rounded-xl font-bold text-gray-600 border-2 border-gray-200 hover:border-gray-300 transition-colors"
                  >
                    Batal
                  </button>
                  <button
                    type="submit"
                    disabled={createPost.isPending}
                    className="bg-[#FFD738] text-white px-8 py-3 rounded-xl font-bold hover:bg-yellow-500 transition-colors flex items-center gap-2 uppercase shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {createPost.isPending ? (
                      <Loader2 size={18} className="animate-spin" />
                    ) : (
                      <Send size={18} />
                    )}
                    Publikasikan
                  </button>
                </div>
              </form>
            </motion.div>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Guidelines */}
            <div className="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
              <h3 className="text-lg font-black uppercase mb-4 text-gray-900">
                📝 Panduan Diskusi
              </h3>
              <ul className="space-y-3 text-sm text-gray-600">
                <li className="flex items-start gap-2">
                  <span className="text-[#FFD738] font-black mt-0.5">•</span>
                  <span>
                    Gunakan judul yang jelas dan deskriptif agar mudah ditemukan
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-[#FFD738] font-black mt-0.5">•</span>
                  <span>
                    Pilih kategori yang sesuai (Resep untuk berbagi resep,
                    Komunitas untuk diskusi umum)
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-[#FFD738] font-black mt-0.5">•</span>
                  <span>
                    Jelaskan topik Anda secara detail agar anggota lain bisa
                    memberikan respons yang tepat
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-[#FFD738] font-black mt-0.5">•</span>
                  <span>
                    Jaga etika berdiskusi — hindari konten yang tidak pantas
                  </span>
                </li>
              </ul>
            </div>

            {/* Author Preview */}
            <div className="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
              <h3 className="text-lg font-black uppercase mb-4 text-gray-900">
                Posting Sebagai
              </h3>
              <div className="flex items-center gap-3">
                {user.avatar_url ? (
                  <Image
                    src={user.avatar_url}
                    alt={user.name}
                    width={48}
                    height={48}
                    className="w-12 h-12 rounded-full object-cover shadow-md"
                  />
                ) : (
                  <div className="w-12 h-12 bg-gradient-to-br from-[#FFD738] to-yellow-500 rounded-full flex items-center justify-center font-black text-white text-lg shadow-md">
                    {user.name.charAt(0)}
                  </div>
                )}
                <div>
                  <p className="font-black text-gray-900">{user.name}</p>
                  <p className="text-xs text-gray-500 font-medium">
                    {user.email}
                  </p>
                </div>
              </div>
            </div>

            {/* Mascot */}
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.5 }}
              className="hidden lg:block"
            >
              <Image
                src="/imports/WhatsApp_Image_2025-10-20_at_09.51.51__2_.jpeg"
                alt="Create Forum Mascot"
                width={400}
                height={400}
                className="w-full h-auto object-contain drop-shadow-2xl animate-float"
              />
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  );
}