import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'

interface ContractSummary {
  id: string
  name: string
  description?: string
  contract_type: string
  phase: string
  status: string
  localOnly?: boolean
  autoMergeLocal?: boolean
  file_count: number
  task_count: number
  repository_count: number
  created_at: string
}

export function ContractList() {
  const [contracts, setContracts] = useState<ContractSummary[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    async function fetchContracts() {
      try {
        setLoading(true)
        const response = await fetch('/api/v1/contracts')
        if (!response.ok) {
          throw new Error(`Failed to fetch contracts: ${response.statusText}`)
        }
        const data = await response.json()
        setContracts(data.contracts || [])
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error')
      } finally {
        setLoading(false)
      }
    }

    fetchContracts()
  }, [])

  if (loading) {
    return (
      <div className="contract-list-container">
        <div className="loading">Loading contracts...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="contract-list-container">
        <div className="error">Error: {error}</div>
      </div>
    )
  }

  return (
    <div className="contract-list-container">
      <h1>Contracts</h1>
      {contracts.length === 0 ? (
        <p>No contracts found</p>
      ) : (
        <ul className="contract-list">
          {contracts.map((contract) => (
            <li key={contract.id} className="contract-item">
              <Link to={`/contracts/${contract.id}`}>
                <h2>{contract.name}</h2>
                {contract.description && <p>{contract.description}</p>}
                <div className="contract-meta">
                  <span>Phase: {contract.phase}</span>
                  <span>Status: {contract.status}</span>
                  <span>Files: {contract.file_count}</span>
                  <span>Tasks: {contract.task_count}</span>
                </div>
              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}