"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Mail, Phone, MapPin, Send, Building2 } from "lucide-react";

interface Board { id: string; name: string; }

export default function ContactPage() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", subject: "", message: "", boardId: "" });
  const [submitted, setSubmitted] = useState(false);
  const [boards, setBoards] = useState<Board[]>([]);
  const [contactInfo, setContactInfo] = useState({
    siteAddress: "تهران، خیابان ورزش، مجتمع ورزشی ملی",
    sitePhone: "۰۲۱-۱۲۳۴۵۶۷۸",
    siteEmail: "info@sports-lms.ir",
  });

  useEffect(() => {
    Promise.all([
      fetch("/api/settings/public").then((r) => r.json()),
      fetch("/api/boards").then((r) => r.json()),
    ]).then(([settings, bds]) => {
      setContactInfo({
        siteAddress: settings.siteAddress || contactInfo.siteAddress,
        sitePhone: settings.sitePhone || contactInfo.sitePhone,
        siteEmail: settings.siteEmail || contactInfo.siteEmail,
      });
      if (Array.isArray(bds)) setBoards(bds);
    }).catch(() => {});
  }, []);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await fetch("/api/contact", {
      method: "POST",
      body: JSON.stringify(form),
    });
    setSubmitted(true);
  };

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-2xl font-bold text-gray-900 mb-8">تماس با ما</h1>

      <div className="grid md:grid-cols-2 gap-12">
        <div>
          <div className="space-y-6">
            {[
              { icon: MapPin, label: "آدرس", value: contactInfo.siteAddress },
              { icon: Phone, label: "تلفن", value: contactInfo.sitePhone },
              { icon: Mail, label: "ایمیل", value: contactInfo.siteEmail },
            ].map((item) => (
              <div key={item.label} className="flex items-start gap-3">
                <div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center shrink-0">
                  <item.icon className="h-5 w-5 text-[#2563EB]" />
                </div>
                <div>
                  <div className="text-sm text-gray-500">{item.label}</div>
                  <div className="font-medium text-gray-900">{item.value}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          {submitted ? (
            <div className="p-6 rounded-xl bg-green-50 border border-green-200 text-center">
              <p className="font-medium text-green-800">پیام شما با موفقیت ارسال شد</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">نام *</label>
                  <input
                    required
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    className="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">ایمیل</label>
                  <input
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    className="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]"
                  />
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">هیئت ورزشی (اختیاری)</label>
                <select
                  value={form.boardId}
                  onChange={(e) => setForm({ ...form, boardId: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB] bg-white"
                >
                  <option value="">پیام عمومی به مدیر سامانه</option>
                  {boards.map((b) => (
                    <option key={b.id} value={b.id}>{b.name}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">موضوع</label>
                <input
                  value={form.subject}
                  onChange={(e) => setForm({ ...form, subject: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">پیام *</label>
                <textarea
                  required
                  rows={5}
                  value={form.message}
                  onChange={(e) => setForm({ ...form, message: e.target.value })}
                  className="w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB]"
                />
              </div>
              <Button type="submit" className="bg-[#2563EB] hover:bg-[#1D4ED8] w-full">
                <Send className="h-4 w-4 ml-1" />
                ارسال پیام
              </Button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}