// pages/matrimonial/index.jsx - Matrimonial Listing
import { useState, useEffect } from 'react';
import Link from 'next/link';

export default function MatrimonialPage() {
  const [profiles, setProfiles] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState({
    gender: '',
    minAge: '',
    maxAge: '',
    religion: '',
    city: ''
  });

  useEffect(() => {
    fetchProfiles();
  }, []);

  const fetchProfiles = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams(filters);
      const response = await fetch(`/api/matrimonial/profiles?${params}`);
      const data = await response.json();
      setProfiles(data.profiles || []);
    } catch (error) {
      console.error('Fetch error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm mb-8">
        <div className="container mx-auto px-4 py-4">
          <h1 className="text-3xl font-bold text-gray-900">Find Your Perfect Match</h1>
        </div>
      </header>

      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Filters Sidebar */}
          <aside className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow p-6 sticky top-4">
              <h3 className="text-lg font-bold mb-4">Filters</h3>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-2">Gender</label>
                  <select
                    value={filters.gender}
                    onChange={(e) => setFilters({ ...filters, gender: e.target.value })}
                    className="w-full px-3 py-2 border rounded"
                  >
                    <option value="">All</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2">Min Age</label>
                  <input
                    type="number"
                    value={filters.minAge}
                    onChange={(e) => setFilters({ ...filters, minAge: e.target.value })}
                    className="w-full px-3 py-2 border rounded"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2">Max Age</label>
                  <input
                    type="number"
                    value={filters.maxAge}
                    onChange={(e) => setFilters({ ...filters, maxAge: e.target.value })}
                    className="w-full px-3 py-2 border rounded"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2">City</label>
                  <input
                    type="text"
                    value={filters.city}
                    onChange={(e) => setFilters({ ...filters, city: e.target.value })}
                    className="w-full px-3 py-2 border rounded"
                    placeholder="Enter city"
                  />
                </div>

                <button
                  onClick={fetchProfiles}
                  className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700"
                >
                  Apply Filters
                </button>
              </div>
            </div>
          </aside>

          {/* Profiles Grid */}
          <div className="lg:col-span-3">
            {loading ? (
              <div className="text-center py-12">Loading profiles...</div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                {profiles.map((profile) => (
                  <ProfileCard key={profile.id} profile={profile} />
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function ProfileCard({ profile }) {
  const age = new Date().getFullYear() - new Date(profile.dateOfBirth).getFullYear();

  return (
    <Link href={`/matrimonial/${profile.id}`}>
      <div className="bg-white rounded-lg shadow hover:shadow-lg transition-shadow cursor-pointer overflow-hidden">
        <div className="h-48 bg-gradient-to-r from-blue-400 to-purple-500"></div>
        <div className="p-4">
          <h3 className="font-bold text-lg mb-1">
            {profile.User?.firstName} {profile.User?.lastName}
          </h3>
          <p className="text-sm text-gray-600 mb-3">
            {age} years • {profile.city}
          </p>
          <div className="flex items-center justify-between text-sm">
            <span className="text-gray-600">{profile.occupation}</span>
            <span className="text-blue-600 font-medium">View Profile →</span>
          </div>
        </div>
      </div>
    </Link>
  );
}
