'use client';

import { useState } from 'react';
import Link from 'next/link';
import PageHeader from '@/components/PageHeader';

export default function EditBenefactorPage({ params }: { params: { id: string } }) {
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    // Simulate API call
    await new Promise((r) => setTimeout(r, 1000));
    setSaving(false);
    setSaved(true);
    setTimeout(() => setSaved(false), 3000);
  };

  return (
    <div className="max-w-2xl space-y-6">
      <PageHeader
        title={`Edit Benefactor #${params.id}`}
        description="Update benefactor information"
      />

      {saved && (
        <div className="flex items-center gap-2 p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-sm text-green-700 dark:text-green-300">
          <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="20 6 9 17 4 12" /></svg>
          Benefactor updated successfully!
        </div>
      )}

      <form onSubmit={handleSubmit} className="card">
        <div className="card-body space-y-4">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="form-label">First Name</label>
              <input type="text" className="form-input" defaultValue="Ali" />
            </div>
            <div>
              <label className="form-label">Last Name</label>
              <input type="text" className="form-input" defaultValue="Mohammadi" />
            </div>
          </div>
          <div>
            <label className="form-label">Phone Number</label>
            <input type="text" className="form-input" defaultValue="09121234567" />
          </div>
          <div>
            <label className="form-label">Email</label>
            <input type="email" className="form-input" defaultValue="ali@example.com" />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="form-label">Gender</label>
              <select className="form-select" defaultValue="male">
                <option value="male">Male</option>
                <option value="female">Female</option>
              </select>
            </div>
            <div>
              <label className="form-label">Status</label>
              <select className="form-select" defaultValue="active">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div>
          </div>
          <div>
            <label className="form-label">Birth Date</label>
            <input type="date" className="form-input" defaultValue="1990-05-15" />
          </div>
          <div>
            <label className="form-label">Description</label>
            <textarea className="form-textarea" rows={3} placeholder="Additional notes..." />
          </div>
        </div>
        <div className="card-footer flex items-center justify-between">
          <Link href="/admin/benefactors" className="btn-outline">Cancel</Link>
          <button type="submit" className="btn-primary" disabled={saving}>
            {saving ? (
              <><span className="spinner-sm" /> Saving...</>
            ) : (
              'Save Changes'
            )}
          </button>
        </div>
      </form>
    </div>
  );
}