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

interface File {
  id: string
  name: string
  description?: string
  body?: string
  contract_id?: string
  version: number
  created_at: string
}

export function FileDetail() {
  const { contractId, fileId } = useParams<{ contractId: string; fileId: string }>()
  const [file, setFile] = useState<File | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    async function fetchFile() {
      if (!fileId) return

      try {
        setLoading(true)
        const response = await fetch(`/api/v1/files/${fileId}`)
        if (!response.ok) {
          throw new Error(`Failed to fetch file: ${response.statusText}`)
        }
        const data = await response.json()
        setFile(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error')
      } finally {
        setLoading(false)
      }
    }

    fetchFile()
  }, [fileId])

  if (loading) {
    return (
      <div className="file-detail-container">
        <div className="loading">Loading file...</div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="file-detail-container">
        <div className="error">Error: {error}</div>
        <Link to={`/contracts/${contractId}`} className="back-link">
          Back to Contract
        </Link>
      </div>
    )
  }

  if (!file) {
    return (
      <div className="file-detail-container">
        <div className="not-found">File not found</div>
        <Link to={`/contracts/${contractId}`} className="back-link">
          Back to Contract
        </Link>
      </div>
    )
  }

  return (
    <div className="file-detail-container">
      <div className="file-detail-header">
        <Link to={`/contracts/${contractId}`} className="back-link">
          Back to Contract
        </Link>
        <h1 className="file-title">{file.name}</h1>
        {file.description && (
          <p className="file-description">{file.description}</p>
        )}
        <div className="file-meta">
          <span>Version: {file.version}</span>
          <span>Created: {new Date(file.created_at).toLocaleString()}</span>
        </div>
      </div>

      <div className="file-detail-body">
        {file.body ? (
          <pre className="file-content">{file.body}</pre>
        ) : (
          <p className="no-content">No content</p>
        )}
      </div>
    </div>
  )
}