import { useState } from 'react'
import { useParams, useSearchParams, Link, useNavigate } from 'react-router-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { useRepo, useRepoBlob, useUpdateBlob } from '../api/queries/repos'
import { RepoListSkeleton } from '../ui/Skeleton'

export default function BlobPage() {
  const { owner = '', repo: repoName = '' } = useParams<{ owner: string; repo: string }>()
  const [searchParams] = useSearchParams()
  const navigate = useNavigate()
  const [editing, setEditing] = useState(false)
  const [editContent, setEditContent] = useState('')
  const [commitMsg, setCommitMsg] = useState('')
  const [preview, setPreview] = useState(false)

  const ref = searchParams.get('ref') ?? ''
  const filePath = searchParams.get('path') ?? ''
  const fileName = filePath.split('/').pop() ?? filePath

  const { data: repo } = useRepo(owner, repoName)
  const { data: blob, isLoading, isError } = useRepoBlob(owner, repoName, ref, filePath)
  const updateBlob = useUpdateBlob(owner, repoName)

  const branch = ref || repo?.defaultBranch || 'main'
  const isMarkdown = fileName.toLowerCase().endsWith('.md')

  function startEdit() {
    setEditContent(blob?.content ?? '')
    setCommitMsg(`Update ${fileName}`)
    setEditing(true)
    setPreview(false)
  }

  function cancelEdit() {
    setEditing(false)
    setPreview(false)
  }

  async function handleCommit() {
    if (!commitMsg.trim() || !filePath) return
    await updateBlob.mutateAsync({
      path: filePath,
      content: editContent,
      message: commitMsg.trim(),
      branch,
    })
    setEditing(false)
    navigate(`/repos/${owner}/${repoName}/blob?ref=${encodeURIComponent(branch)}&path=${encodeURIComponent(filePath)}`, { replace: true })
  }

  if (isLoading) return <div className="p-6"><RepoListSkeleton /></div>
  if (isError || !blob) return <div className="p-6 text-sm text-[var(--c-danger)]">File not found.</div>

  const lines = blob.content.split('\n')
  const pathParts = filePath.split('/')

  return (
    <div className="max-w-5xl mx-auto px-4 md:px-6 py-6 space-y-4">

      {/* Breadcrumb */}
      <div className="flex items-center gap-1 text-sm flex-wrap">
        <Link to="/repos" className="text-[var(--c-brand)] hover:underline">Repositories</Link>
        <span className="text-[var(--c-muted)]">/</span>
        <Link to={`/repos/${owner}/${repoName}`} className="text-[var(--c-brand)] hover:underline">{repoName}</Link>
        {pathParts.map((seg, i) => {
          const partial = pathParts.slice(0, i + 1).join('/')
          const isLast = i === pathParts.length - 1
          return (
            <span key={partial} className="flex items-center gap-1">
              <span className="text-[var(--c-muted)]">/</span>
              {isLast
                ? <span className="font-semibold text-[var(--c-text)]">{seg}</span>
                : <Link to={`/repos/${owner}/${repoName}?path=${encodeURIComponent(partial)}&ref=${encodeURIComponent(branch)}`} className="text-[var(--c-brand)] hover:underline">{seg}</Link>
              }
            </span>
          )
        })}
      </div>

      {/* File card */}
      <div className="border border-[var(--c-border)] rounded bg-[var(--c-surface)] overflow-hidden">

        {/* Toolbar */}
        <div className="flex items-center justify-between px-4 py-2.5 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)] gap-3 flex-wrap">
          <div className="flex items-center gap-2 text-sm">
            {/* Branch pill */}
            <span className="flex items-center gap-1 px-2 py-0.5 border border-[var(--c-border)] rounded text-xs text-[var(--c-muted)] bg-[var(--c-surface)]">
              <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
              </svg>
              {branch}
            </span>
            <span className="text-[var(--c-muted)]">{repoName}</span>
            <span className="text-[var(--c-muted)]">/</span>
            <span className="font-medium text-[var(--c-text)]">{fileName}</span>
            <button
              onClick={() => navigator.clipboard.writeText(filePath)}
              className="text-[var(--c-muted)] hover:text-[var(--c-text)]"
              title="Copy path"
            >
              <svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
              </svg>
            </button>
          </div>

          {!editing && (
            <div className="flex items-center gap-1">
              {isMarkdown && (
                <button
                  onClick={() => setPreview(p => !p)}
                  className={`px-3 py-1.5 text-xs font-medium rounded border ${preview ? 'border-[var(--c-brand)] text-[var(--c-brand)] bg-[var(--c-brand-tint)]' : 'border-[var(--c-border)] text-[var(--c-muted)] hover:bg-[var(--c-surface-muted)]'}`}
                >
                  {preview ? 'Source' : 'Preview'}
                </button>
              )}
              <button
                onClick={startEdit}
                className="px-3 py-1.5 text-xs font-medium border border-[var(--c-border)] rounded text-[var(--c-text)] hover:bg-[var(--c-surface-muted)] flex items-center gap-1.5"
              >
                <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125" />
                </svg>
                Edit
              </button>
              <button
                onClick={() => navigator.clipboard.writeText(blob.content)}
                className="px-3 py-1.5 text-xs font-medium border border-[var(--c-border)] rounded text-[var(--c-muted)] hover:bg-[var(--c-surface-muted)]"
              >
                Copy
              </button>
            </div>
          )}
        </div>

        {/* Content */}
        {editing ? (
          <div className="flex flex-col">
            <textarea
              value={editContent}
              onChange={e => setEditContent(e.target.value)}
              className="w-full font-mono text-xs text-[var(--c-text)] bg-[var(--c-surface)] p-4 resize-none focus:outline-none border-b border-[var(--c-border)]"
              style={{ minHeight: Math.max(300, lines.length * 20) }}
              spellCheck={false}
            />
            <div className="p-4 bg-[var(--c-surface-raised)] border-t border-[var(--c-border)] space-y-3">
              <div>
                <label className="block text-xs font-semibold text-[var(--c-text)] mb-1">Commit message</label>
                <input
                  value={commitMsg}
                  onChange={e => setCommitMsg(e.target.value)}
                  className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--c-brand-focus)]"
                  placeholder="Describe your changes…"
                />
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={handleCommit}
                  disabled={updateBlob.isPending || !commitMsg.trim()}
                  className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] disabled:opacity-50"
                >
                  {updateBlob.isPending ? 'Committing…' : 'Commit changes'}
                </button>
                <button onClick={cancelEdit} className="px-4 py-2 rounded border border-[var(--c-border)] text-sm text-[var(--c-text)] hover:bg-[var(--c-surface-muted)]">
                  Cancel
                </button>
                {updateBlob.isError && (
                  <span className="text-xs text-[var(--c-danger)]">{(updateBlob.error as Error)?.message}</span>
                )}
              </div>
            </div>
          </div>
        ) : isMarkdown && preview ? (
          <div className="px-6 py-5 prose prose-sm max-w-none text-[var(--c-text)]
            prose-headings:text-[var(--c-text)] prose-headings:font-semibold prose-headings:border-b prose-headings:border-[var(--c-border)] prose-headings:pb-1
            prose-a:text-[var(--c-brand)] prose-code:bg-[var(--c-surface-muted)] prose-code:px-1 prose-code:rounded
            prose-pre:bg-[var(--c-surface-muted)] prose-pre:border prose-pre:border-[var(--c-border)] prose-pre:rounded">
            <ReactMarkdown remarkPlugins={[remarkGfm]}>{blob.content}</ReactMarkdown>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full border-collapse font-mono text-xs">
              <tbody>
                {lines.map((line, i) => (
                  <tr key={i} className="hover:bg-[#FFFBDD]">
                    <td className="select-none text-right text-[var(--c-muted)] px-4 py-0.5 w-12 border-r border-[var(--c-border)] bg-[var(--c-surface-raised)] sticky left-0">
                      {i + 1}
                    </td>
                    <td className="px-4 py-0.5 text-[var(--c-text)] whitespace-pre">{line || ' '}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}