'use client';

import React, { useState } from 'react';
import { Send, CheckCircle2, Sparkles, BookOpen } from 'lucide-react';
import { showToast } from '@/components/common/Toast';

export default function PublishWithUsPage() {
  const [submitted, setSubmitted] = useState(false);
  const [formData, setFormData] = useState({
    authorName: '',
    email: '',
    phone: '',
    manuscriptTitle: '',
    genre: 'Vedic & Spiritual',
    synopsis: '',
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
    showToast('Manuscript proposal submitted successfully!', 'success');
  };

  return (
    <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-10">
      <div className="text-center space-y-2">
        <span className="text-xs uppercase font-extrabold tracking-widest text-saffron-600">Author Publishing Desk</span>
        <h1 className="text-3xl font-extrabold">Publish Your Book With Us</h1>
        <p className="text-xs text-zinc-500 max-w-xl mx-auto">
          Are you an author, translator, or scholar? Submit your manuscript proposal to reach millions of readers worldwide.
        </p>
      </div>

      {submitted ? (
        <div className="bg-white dark:bg-zinc-900 p-10 rounded-3xl border border-zinc-200 dark:border-zinc-800 text-center space-y-4 shadow-xl">
          <CheckCircle2 className="w-12 h-12 text-green-600 mx-auto" />
          <h2 className="text-2xl font-extrabold">Proposal Received!</h2>
          <p className="text-xs text-zinc-500">
            Our editorial board will review your manuscript synopsis and contact you within 5-7 business days.
          </p>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="bg-white dark:bg-zinc-900 p-8 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-xl space-y-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
            <div>
              <label className="font-bold text-zinc-700 dark:text-zinc-300 block mb-1">Author Name</label>
              <input
                type="text"
                required
                value={formData.authorName}
                onChange={(e) => setFormData({ ...formData, authorName: e.target.value })}
                className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
              />
            </div>
            <div>
              <label className="font-bold text-zinc-700 dark:text-zinc-300 block mb-1">Email Address</label>
              <input
                type="email"
                required
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
              />
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
            <div>
              <label className="font-bold text-zinc-700 dark:text-zinc-300 block mb-1">Manuscript Title</label>
              <input
                type="text"
                required
                value={formData.manuscriptTitle}
                onChange={(e) => setFormData({ ...formData, manuscriptTitle: e.target.value })}
                className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
              />
            </div>
            <div>
              <label className="font-bold text-zinc-700 dark:text-zinc-300 block mb-1">Literary Genre / Category</label>
              <select
                value={formData.genre}
                onChange={(e) => setFormData({ ...formData, genre: e.target.value })}
                className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
              >
                <option value="Vedic & Spiritual">Vedic & Spiritual</option>
                <option value="Fiction & Literature">Fiction & Literature</option>
                <option value="History & Culture">History & Culture</option>
                <option value="Philosophy">Philosophy</option>
                <option value="Regional Languages">Regional Languages</option>
              </select>
            </div>
          </div>

          <div className="text-xs">
            <label className="font-bold text-zinc-700 dark:text-zinc-300 block mb-1">Synopsis & Author Bio</label>
            <textarea
              rows={4}
              required
              placeholder="Brief summary of your book and author background..."
              value={formData.synopsis}
              onChange={(e) => setFormData({ ...formData, synopsis: e.target.value })}
              className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-semibold"
            />
          </div>

          <button
            type="submit"
            className="w-full py-3.5 rounded-2xl gradient-saffron text-white font-extrabold text-xs shadow-lg flex items-center justify-center gap-2"
          >
            <Send className="w-4 h-4" /> Submit Manuscript Proposal
          </button>
        </form>
      )}
    </div>
  );
}