'use client';

import { useRouter } from 'next/navigation';

interface SurveyResultsProps {
  data: any;
}

export default function SurveyResults({ data }: SurveyResultsProps) {
  const router = useRouter();

  if (!data || !data.survey_plans || data.survey_plans.length === 0) {
    return (
      <div className="empty-state">
        <div className="empty-state-icon">📐</div>
        <div className="empty-state-text">No survey plans found</div>
        <div className="empty-state-subtext">Try adjusting your search criteria</div>
      </div>
    );
  }

  const totalSurveyPlans = data.total_results || data.survey_plans.length;

  const handleViewSurveyPlan = (planId: number) => {
    router.push(`/survey-plan/${planId}`);
  };

  return (
    <div className="results-container" style={{ display: 'flex', gap: '20px' }}>
      {/* Left Panel: Search Parameters */}
      <div className="search-params-panel" style={{ flexShrink: 0, width: '350px', background: '#ffffff', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)', border: '1px solid #e8dcc4', padding: '20px', position: 'sticky', top: '20px', alignSelf: 'flex-start' }}>
        <h3 className="section-title" style={{ color: '#1f2937', marginBottom: '20px' }}>🔍 Search Parameters</h3>
        {Object.keys(data.search_params).length > 0 ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
            {Object.entries(data.search_params).map(([key, value]: [string, any]) => (
              <div key={key} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px dashed #e5e7eb' }}>
                <span style={{ fontWeight: '600', color: '#374151' }}>{key}:</span>
                <span style={{ color: '#1f2937' }}>{value}</span>
              </div>
            ))}
          </div>
        ) : (
          <div style={{ color: '#6b7280', textAlign: 'center', padding: '20px' }}>No search parameters applied.</div>
        )}
      </div>

      {/* Right Panel: Search Results */}
      <div style={{ flexGrow: 1, background: '#ffffff', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.05)', border: '1px solid #e8dcc4', padding: '20px' }}>
        <h2 className="section-title" style={{ color: '#1f2937', marginBottom: '20px' }}>
          📐 Survey Plan Search Results ({totalSurveyPlans} {totalSurveyPlans !== 1 ? 'Results' : 'Result'})
        </h2>
        <div style={{ overflowX: 'auto' }}>
          <table className="results-table">
            <thead>
              <tr>
                <th>Plan Number</th>
                <th>Surveyor Name</th>
                <th>Survey Date</th>
                <th>Property Number</th>
                <th>Tracing Number</th>
                <th>Land Use</th>
                <th>Transactions</th>
              </tr>
            </thead>
            <tbody>
              {data.survey_plans.map((plan: any, index: number) => (
                <tr key={plan.id} style={{ background: index % 2 === 0 ? '#ffffff' : '#fafafa' }}>
                  <td>
                    <strong 
                      style={{ color: '#10b981', cursor: 'pointer', textDecoration: 'underline' }}
                      onClick={() => handleViewSurveyPlan(plan.id)}
                      title="Click to view full survey plan details"
                    >
                      {plan.survey_plan_no || ''}
                    </strong>
                  </td>
                  <td>{plan.surveyor_name || ''}</td>
                  <td>{plan.survey_date ? new Date(plan.survey_date).toLocaleDateString() : ''}</td>
                  <td>{plan.property_number || ''}</td>
                  <td>{plan.tracing_number || ''}</td>
                  <td>{plan.actual_use_type_label || ''}</td>
                  <td>
                    {plan.transaction_count > 0 ? (
                      <span className="badge badge-info">{plan.transaction_count}</span>
                    ) : (
                      <span style={{ color: '#6b7280' }}>0</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div style={{ marginTop: '20px', textAlign: 'center', color: '#6b7280' }}>
          Page 1 of {Math.ceil(totalSurveyPlans / 100)} (Showing {Math.min(data.survey_plans.length, 100)} of {totalSurveyPlans} items)
        </div>
      </div>
    </div>
  );
}