import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { claimsAPI } from '../services/api';

export default function Claims() {
  const [claims, setClaims] = useState([]);
  const [loading, setLoading] = useState(true);
  const [status, setStatus] = useState('');

  useEffect(() => {
    const fetchClaims = async () => {
      try {
        const response = await claimsAPI.list(1, 20, status);
        setClaims(response.claims || []);
      } catch (error) {
        console.error('Failed to fetch claims:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchClaims();
  }, [status]);

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold text-gray-800">Claims</h1>
        <select
          value={status}
          onChange={(e) => setStatus(e.target.value)}
          className="px-4 py-2 border border-gray-300 rounded"
        >
          <option value="">All Status</option>
          <option value="submitted">Submitted</option>
          <option value="under_review">Under Review</option>
          <option value="approved">Approved</option>
          <option value="paid">Paid</option>
          <option value="rejected">Rejected</option>
        </select>
      </div>

      {loading && <p className="text-gray-600">Loading...</p>}

      {!loading && (
        <div className="bg-white rounded-lg shadow overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-100 border-b">
              <tr>
                <th className="px-4 py-2 text-left font-semibold">Claim No</th>
                <th className="px-4 py-2 text-left font-semibold">Type</th>
                <th className="px-4 py-2 text-left font-semibold">Amount</th>
                <th className="px-4 py-2 text-left font-semibold">Status</th>
                <th className="px-4 py-2 text-left font-semibold">Date Reported</th>
                <th className="px-4 py-2 text-left font-semibold">Actions</th>
              </tr>
            </thead>
            <tbody>
              {claims.map((claim) => (
                <tr key={claim.id} className="border-b hover:bg-gray-50">
                  <td className="px-4 py-2 font-mono">{claim.claim_no}</td>
                  <td className="px-4 py-2 capitalize">{claim.claim_type}</td>
                  <td className="px-4 py-2">
                    {claim.total_amount ? `TZS ${claim.total_amount.toLocaleString()}` : '-'}
                  </td>
                  <td className="px-4 py-2">
                    <span className={`px-2 py-1 rounded text-xs font-semibold ${
                      claim.status === 'paid'
                        ? 'bg-green-100 text-green-800'
                        : claim.status === 'approved'
                        ? 'bg-blue-100 text-blue-800'
                        : claim.status === 'submitted' || claim.status === 'under_review'
                        ? 'bg-yellow-100 text-yellow-800'
                        : 'bg-red-100 text-red-800'
                    }`}>
                      {claim.status}
                    </span>
                  </td>
                  <td className="px-4 py-2">{claim.date_reported}</td>
                  <td className="px-4 py-2">
                    <Link
                      to={`/claims/${claim.id}`}
                      className="text-blue-600 hover:underline"
                    >
                      View
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          {claims.length === 0 && (
            <div className="text-center py-8 text-gray-600">No claims found</div>
          )}
        </div>
      )}
    </div>
  );
}
