'use client';

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

interface BoundaryResultsProps {
  boundaries: Boundary[];
  loading?: boolean;
  error?: string;
}

export default function BoundaryResults({ boundaries, loading, error }: BoundaryResultsProps) {
  const router = useRouter();
  const [selectedBoundary, setSelectedBoundary] = useState<Boundary | null>(null);

  const handleBoundaryClick = (boundary: Boundary) => {
    router.push(`/boundary/${boundary.boundary_number}`);
  };

  const getBoundaryTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      interstate: 'Interstate',
      international: 'International',
      administrative: 'Administrative',
      customary: 'Customary',
      disputed: 'Disputed',
    };
    return labels[type] || type;
  };

  const getStatusBadge = (status: string) => {
    const statusColors: Record<string, string> = {
      active: 'bg-green-100 text-green-800',
      inactive: 'bg-gray-100 text-gray-800',
      under_review: 'bg-yellow-100 text-yellow-800',
    };
    return statusColors[status] || 'bg-gray-100 text-gray-800';
  };

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

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

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

  return (
    <div className="results-container boundary-results">
      <div className="results-header">
        <h3>Boundary Results ({boundaries.length})</h3>
      </div>

      <div className="results-grid">
        {boundaries.map((boundary) => (
          <Card
            key={boundary.id || boundary.boundary_number}
            className="boundary-card"
            onClick={() => handleBoundaryClick(boundary)}
          >
            <div className="card-header">
              <div className="card-title-row">
                <h4 className="card-title">{boundary.name}</h4>
                <span className={`status-badge ${getStatusBadge(boundary.status)}`}>
                  {boundary.status}
                </span>
              </div>
              <p className="card-subtitle">Boundary Number: {boundary.boundary_number}</p>
            </div>

            <div className="card-body">
              <div className="info-row">
                <span className="info-label">Type:</span>
                <span className="info-value">{getBoundaryTypeLabel(boundary.boundary_type)}</span>
              </div>

              <div className="info-row">
                <span className="info-label">States:</span>
                <span className="info-value">
                  {boundary.state_a} ↔ {boundary.state_b}
                </span>
              </div>

              {boundary.length_km && (
                <div className="info-row">
                  <span className="info-label">Length:</span>
                  <span className="info-value">{boundary.length_km} km</span>
                </div>
              )}

              {boundary.established_date && (
                <div className="info-row">
                  <span className="info-label">Established:</span>
                  <span className="info-value">
                    {new Date(boundary.established_date).toLocaleDateString()}
                  </span>
                </div>
              )}

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

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