import { useQuery } from '@tanstack/react-query'
import { useCallback, useState } from 'react'
import { settingsApi } from '../api/client'

function fmtSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
  return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + units[i]
}

function fmtPercent(p: number): string {
  return p.toFixed(1) + '%'
}

function CopyPath({ path }: { path: string }) {
  const [copied, setCopied] = useState(false)
  const copy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(path)
      setCopied(true)
      setTimeout(() => setCopied(false), 1500)
    } catch {}
  }, [path])

  return (
    <span
      onClick={copy}
      title={path}
      className="cursor-pointer flex items-center max-w-full font-mono text-xs hover:text-blue-400 transition-colors"
    >
      <span
        className="overflow-hidden text-ellipsis whitespace-nowrap"
        style={{ direction: 'rtl', textAlign: 'left' }}
      >
        <span style={{ direction: 'ltr', unicodeBidi: 'embed' }}>
          {path}
        </span>
      </span>
      {copied && <span className="ml-0.5 text-green-400 shrink-0">✓</span>}
    </span>
  )
}

export default function Status() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['server-health'],
    queryFn: settingsApi.health,
    refetchInterval: 10000,
  })

  if (isLoading) return <p className="text-neutral-400">Loading status...</p>
  if (error) return <p className="text-red-400">Failed to load status: {(error as Error).message}</p>
  if (!data) return null

  return (
    <div>
      <h2 className="text-2xl font-semibold mb-6">Deploy Status</h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Section title="Server">
          <StatusRow label="Running" value={data.server.running ? 'Yes' : 'No'} ok={data.server.running} />
          <StatusRow label="Binary installed" value={data.server.installed ? 'Yes' : 'No'} ok={data.server.installed} />
          {data.server.binary_path && (
            <StatusRow label="Binary path" value={<CopyPath path={data.server.binary_path} />} />
          )}
        </Section>

        <Section title="SteamCMD">
          <StatusRow label="Running" value={data.steamcmd.running ? 'Yes' : 'No'} ok={!data.steamcmd.running} warn={data.steamcmd.running} />
        </Section>

        <Section title="Mods">
          <StatusRow label="Workshop mods" value={String(data.mods.workshop_count)} />
          <StatusRow label="Local mods" value={String(data.mods.local_count)} />
          <StatusRow label="Total" value={String(data.mods.workshop_count + data.mods.local_count)} />
        </Section>

        <Section title="Frontend">
          <StatusRow label="Served" value={data.frontend.served ? 'Yes' : 'No'} ok={data.frontend.served} />
          <StatusRow label="Path" value={data.frontend.path ? <CopyPath path={data.frontend.path} /> : '-'} />
        </Section>
      </div>

      <div className="mt-6">
        <Section title="Directories">
          <table className="w-full text-sm table-fixed">
            <thead>
              <tr className="text-neutral-500 border-b border-neutral-800">
                <th className="text-left py-2 pr-4 w-[55%]">Path</th>
                <th className="text-center py-2 px-4 w-[22%]">Exists</th>
                <th className="text-center py-2 px-4 w-[23%]">Writable</th>
              </tr>
            </thead>
            <tbody>
              {data.paths.map((p, i) => (
                <tr key={i} className="border-b border-neutral-800/50">
                  <td className="py-2 pr-4 overflow-hidden"><CopyPath path={p.path} /></td>
                  <td className="text-center py-2 px-4">
                    <Badge ok={p.exists} label={p.exists ? 'Yes' : 'No'} />
                  </td>
                  <td className="text-center py-2 px-4">
                    <Badge ok={p.writable} label={p.writable ? 'Yes' : 'No'} />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Section>
      </div>

      <div className="mt-6">
        <Section title="Disk Usage">
          <table className="w-full text-sm table-fixed">
            <thead>
              <tr className="text-neutral-500 border-b border-neutral-800">
                <th className="text-left py-2 pr-4 w-[40%]">Path</th>
                <th className="text-right py-2 px-4 w-[20%]">Total</th>
                <th className="text-right py-2 px-4 w-[20%]">Free</th>
                <th className="text-right py-2 px-4 w-[20%]">Used</th>
              </tr>
            </thead>
            <tbody>
              {data.disk.map((d, i) => (
                <tr key={i} className="border-b border-neutral-800/50">
                  <td className="py-2 pr-4 overflow-hidden"><CopyPath path={d.path} /></td>
                  <td className="text-right py-2 px-4">{fmtSize(d.total_bytes)}</td>
                  <td className="text-right py-2 px-4">{fmtSize(d.free_bytes)}</td>
                  <td className="text-right py-2 px-4">
                    <span className={d.used_percent > 90 ? 'text-red-400' : d.used_percent > 75 ? 'text-yellow-400' : ''}>
                      {fmtPercent(d.used_percent)}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Section>
      </div>
    </div>
  )
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="bg-neutral-900 border border-neutral-800 rounded-lg p-4">
      <h3 className="font-medium mb-3 text-neutral-300">{title}</h3>
      <div>{children}</div>
    </div>
  )
}

function StatusRow({ label, value, ok, warn }: { label: string; value: React.ReactNode; ok?: boolean; warn?: boolean }) {
  return (
    <div className="flex justify-between items-center py-1.5 text-sm">
      <span className="text-neutral-500 shrink-0">{label}</span>
      <span className="flex items-center gap-2 min-w-0 max-w-[65%]">
        {ok !== undefined && <Dot color={ok ? 'bg-green-400' : 'bg-red-400'} />}
        {warn && <Dot color="bg-yellow-400" />}
        <span className={`min-w-0 overflow-hidden ${ok === false ? 'text-red-400' : warn ? 'text-yellow-400' : ''}`}>{value}</span>
      </span>
    </div>
  )
}

function Badge({ ok, label }: { ok: boolean; label: string }) {
  return (
    <span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${ok ? 'bg-green-900/50 text-green-400' : 'bg-red-900/50 text-red-400'}`}>
      {label}
    </span>
  )
}

function Dot({ color }: { color: string }) {
  return <span className={`inline-block w-2 h-2 rounded-full ${color}`} />
}