'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import type { BoundaryDispute } from '@/types/boundary';
import { Card } from '@/components/ui';

interface DisputeResultsProps {
  disputes: BoundaryDispute[];
  loading?: boolean;
  error?: string;
}

export default function DisputeResults({ disputes, loading, error }: DisputeResultsProps) {
  const router = useRouter();
  const [selectedDispute, setSelectedDispute] = useState<BoundaryDispute | null>(null);

  const handleDisputeClick = (dispute: BoundaryDispute) => {
    router.push(`/dispute/${dispute.dispute_number}`);
  };

  const getStatusBadge = (status: string) => {
    const statusColors: Record<string, string> = {
      pending: 'bg-yellow-100 text-yellow-800',
      under_investigation: 'bg-blue-100 text-blue-800',
      mediation: 'bg-purple-100 text-purple-800',
      adjudication: 'bg-orange-100 text-orange-800',
      resolved: 'bg-green-100 text-green-800',
      appealed: 'bg-red-100 text-red-800',
      closed: 'bg-gray-100 text-gray-800',
    };
    return statusColors[status] || 'bg-gray-100 text-gray-800';
  };

  const getPriorityBadge = (priority: string) => {
    const priorityColors: Record<string, string> = {
      low: 'bg-gray-100 text-gray-800',
      normal: 'bg-blue-100 text-blue-800',
      high: 'bg-orange-100 text-orange-800',
      urgent: 'bg-red-100 text-red-800',
    };
    return priorityColors[priority] || 'bg-gray-100 text-gray-800';
  };

  if (loading) {
    return (
      <div className="results-container">
        <div className="loading-state">
          <div className="spinner"></div>
          <p>Loading disputes...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="results-container">
        <div className="error-state">
          <p className="error-message">❌ {error}</p>
        </div>
      </div>
    );
  }

  if (disputes.length === 0) {
    return (
      <div className="results-container">
        <div className="empty-state">
          <p>No disputes found. Try adjusting your search criteria.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="results-container dispute-results">
      <div className="results-header">
        <h3>Dispute Results ({disputes.length})</h3>
      </div>

      <div className="results-grid">
        {disputes.map((dispute) => (
          <Card
            key={dispute.id || dispute.dispute_number}
            className="dispute-card"
            onClick={() => handleDisputeClick(dispute)}
          >
            <div className="card-header">
              <div className="card-title-row">
                <h4 className="card-title">{dispute.title}</h4>
                <div className="badge-group">
                  <span className={`status-badge ${getStatusBadge(dispute.status)}`}>
                    {dispute.status.replace('_', ' ')}
                  </span>
                  <span className={`priority-badge ${getPriorityBadge(dispute.priority)}`}>
                    {dispute.priority}
                  </span>
                </div>
              </div>
              <p className="card-subtitle">Dispute Number: {dispute.dispute_number}</p>
            </div>

            <div className="card-body">
              <div className="info-row">
                <span className="info-label">Claimants:</span>
                <span className="info-value">
                  {dispute.claimant_a} vs {dispute.claimant_b}
                </span>
              </div>

              {dispute.disputed_area_km2 && (
                <div className="info-row">
                  <span className="info-label">Disputed Area:</span>
                  <span className="info-value">{dispute.disputed_area_km2} km²</span>
                </div>
              )}

              <div className="info-row">
                <span className="info-label">Filed Date:</span>
                <span className="info-value">
                  {new Date(dispute.filed_date).toLocaleDateString()}
                </span>
              </div>

              {dispute.assigned_officer && (
                <div className="info-row">
                  <span className="info-label">Assigned Officer:</span>
                  <span className="info-value">{dispute.assigned_officer}</span>
                </div>
              )}

              {dispute.description && (
                <div className="info-row">
                  <span className="info-label">Description:</span>
                  <span className="info-value description-text">
                    {dispute.description.length > 150
                      ? `${dispute.description.substring(0, 150)}...`
                      : dispute.description}
                  </span>
                </div>
              )}

              {dispute.resolution_date && (
                <div className="info-row">
                  <span className="info-label">Resolved:</span>
                  <span className="info-value">
                    {new Date(dispute.resolution_date).toLocaleDateString()}
                  </span>
                </div>
              )}
            </div>

            <div className="card-footer">
              <button className="btn-link">View Details →</button>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}