import { useState } from 'react';
import { Link } from 'react-router-dom';
import { api } from '../../api/client';

export default function CooperationPage() {
  const [form, setForm] = useState({
    fullName: '',
    phone: '',
    email: '',
    currentJob: '',
    businessName: '',
    message: '',
  });
  const [done, setDone] = useState(false);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      await api.post('/cooperation', form);
      setDone(true);
    } catch (err) {
      setError(err.response?.data?.error || 'خطا');
    } finally {
      setLoading(false);
    }
  };

  if (done) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-navy-950 p-8">
        <div className="card max-w-md text-center">
          <p className="text-emerald-400 text-4xl mb-4">✓</p>
          <h2 className="font-bold mb-2">درخواست ارسال شد</h2>
          <Link to="/login" className="text-accent text-sm mt-4 inline-block">
            بازگشت
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-navy-950 py-12 px-4">
      <div className="max-w-lg mx-auto">
        <Link to="/register" className="text-accent text-sm mb-6 inline-block">← بازگشت</Link>
        <h1 className="text-2xl font-bold mb-8">درخواست همکاری</h1>
        <form onSubmit={handleSubmit} className="card space-y-4">
          {error && <div className="p-3 rounded-xl bg-red-500/20 text-red-400 text-sm">{error}</div>}
          {[
            ['fullName', 'نام کامل'],
            ['phone', 'شماره موبایل'],
            ['email', 'ایمیل'],
            ['currentJob', 'شغل فعلی'],
            ['businessName', 'نام کسب‌وکار (اختیاری)'],
          ].map(([key, label]) => (
            <div key={key}>
              <label className="text-sm text-gray-400 mb-1 block">{label}</label>
              <input
                className="input-field"
                value={form[key]}
                onChange={(e) => setForm({ ...form, [key]: e.target.value })}
                required={!label.includes('اختیاری')}
                dir={key === 'email' ? 'ltr' : 'rtl'}
              />
            </div>
          ))}
          <div>
            <label className="text-sm text-gray-400 mb-1 block">مهارت‌ها و توضیحات</label>
            <textarea
              className="input-field min-h-[120px]"
              value={form.message}
              onChange={(e) => setForm({ ...form, message: e.target.value })}
              required
            />
          </div>
          <button type="submit" className="btn-primary" disabled={loading}>
            ارسال درخواست همکاری
          </button>
        </form>
      </div>
    </div>
  );
}
