'use client'

import { useState } from 'react'
import { Check, Code2, Copy, X } from 'lucide-react'
import { formatDate, relativeTime, type Application } from '@/lib/api/types'
import { Badge } from './Badge'

interface DetailProps {
  app: Application
  onClose: () => void
}

export function Detail({ app, onClose }: DetailProps) {
  const [copied, setCopied] = useState(false)

  const copy = () => {
    navigator.clipboard?.writeText(JSON.stringify(app.response, null, 2))
    setCopied(true)
    setTimeout(() => setCopied(false), 1500)
  }

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <aside className="drawer" onClick={(e) => e.stopPropagation()}>
        <div className="drawer-head">
          <div>
            <p>Application detail</p>
            <h2>{app.id}</h2>
          </div>
          <button className="icon-button" onClick={onClose}>
            <X size={18} />
          </button>
        </div>
        <div className="drawer-section">
          <div className="detail-title">
            <div className="large-avatar">{app.id.slice(-2)}</div>
            <div>
              <h3>{app.jobTitle}</h3>
              <p>{app.location}</p>
            </div>
          </div>
          <div className="detail-grid">
            <div>
              <small>Application status</small>
              <Badge>{app.status}</Badge>
            </div>
            <div>
              <small>Slot status</small>
              <Badge>{app.slotStatus}</Badge>
            </div>
            <div>
              <small>Application date</small>
              <b>{formatDate(app.applicationDate)}</b>
            </div>
            <div>
              <small>Last checked</small>
              <b suppressHydrationWarning>{relativeTime(app.lastChecked)}</b>
            </div>
          </div>
        </div>
        <div className="drawer-section">
          <div className="section-label">
            <span>API response</span>
            <button className="copy-button" onClick={copy}>
              {copied ? <Check size={14} /> : <Copy size={14} />} {copied ? 'Copied' : 'Copy JSON'}
            </button>
          </div>
          <pre>{JSON.stringify(app.response, null, 2)}</pre>
        </div>
        <div className="drawer-note">
          <Code2 size={16} />
          <span>Raw data is shown for development inspection only. No credentials are exposed.</span>
        </div>
      </aside>
    </div>
  )
}