import { useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import { useIssues, useCreateIssue, useCloseIssue, useReopenIssue } from '../api/queries/issues'
import { cn } from '../lib/utils'
import type { IssueState } from '../types/api'

export default function RepoIssuesPage() {
  const { owner = '', repo = '' } = useParams<{ owner: string; repo: string }>()
  const [state, setState] = useState<IssueState>('open')
  const [showNew, setShowNew] = useState(false)

  const { data: issues, isLoading } = useIssues(owner, repo, state)
  const createIssue = useCreateIssue(owner, repo)
  const closeIssue = useCloseIssue(owner, repo)
  const reopenIssue = useReopenIssue(owner, repo)

  const [title, setTitle] = useState('')
  const [body, setBody] = useState('')

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!title.trim()) return
    await createIssue.mutateAsync({ title: title.trim(), body })
    setTitle(''); setBody(''); setShowNew(false)
  }

  return (
    <div className="max-w-4xl mx-auto px-4 md:px-6 py-6">
      <div className="flex items-center gap-1 text-sm mb-4">
        <Link to={`/repos/${owner}/${repo}`} className="text-[var(--c-brand)] hover:underline">{repo}</Link>
        <span className="text-[var(--c-muted)]">/</span>
        <span className="font-semibold text-[var(--c-text)]">Issues</span>
      </div>

      <div className="flex items-center justify-between mb-4">
        <h1 className="text-xl font-semibold text-[var(--c-text)]">Issues</h1>
        <button onClick={() => setShowNew(true)}
          className="px-3 py-2 rounded bg-[var(--c-brand)] text-white text-sm font-medium hover:bg-[var(--c-brand-hover)] min-h-[44px]">
          New issue
        </button>
      </div>

      {showNew && (
        <form onSubmit={handleCreate} className="mb-6 p-5 border border-[var(--c-brand-focus)] rounded bg-[var(--c-surface)] space-y-3">
          <h2 className="text-sm font-semibold text-[var(--c-text)]">New Issue</h2>
          <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Title" required
            className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--c-brand-focus)]" />
          <textarea value={body} onChange={e => setBody(e.target.value)} placeholder="Description (optional)" rows={4}
            className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm resize-none focus:outline-none focus:border-[var(--c-brand-focus)]" />
          <div className="flex gap-2">
            <button type="submit" disabled={createIssue.isPending || !title.trim()}
              className="px-4 py-2 rounded bg-[var(--c-brand)] text-white text-sm hover:bg-[var(--c-brand-hover)] disabled:opacity-50 min-h-[44px]">
              {createIssue.isPending ? 'Submitting…' : 'Submit'}
            </button>
            <button type="button" onClick={() => setShowNew(false)}
              className="px-4 py-2 rounded border border-[var(--c-border)] text-sm text-[var(--c-text)] hover:bg-[var(--c-surface-muted)] min-h-[44px]">
              Cancel
            </button>
          </div>
        </form>
      )}

      <div className="flex gap-1 mb-4 border-b border-[var(--c-border)]">
        {(['open', 'closed'] as IssueState[]).map(s => {
          const count = issues?.filter(i => i.state === s).length ?? 0
          return (
            <button key={s} onClick={() => setState(s)}
              className={cn('px-4 py-2 text-sm font-medium capitalize border-b-2 -mb-px min-h-[44px]',
                state === s ? 'border-[var(--c-brand)] text-[var(--c-brand)]' : 'border-transparent text-[var(--c-muted)] hover:text-[var(--c-text)]')}>
              {s} {count > 0 && `(${count})`}
            </button>
          )
        })}
      </div>

      {isLoading ? (
        <p className="text-sm text-[var(--c-muted)] py-4">Loading…</p>
      ) : !issues?.length ? (
        <p className="text-sm text-[var(--c-muted)] py-8 text-center">No {state} issues.</p>
      ) : (
        <div className="flex flex-col gap-2">
          {issues.map(issue => (
            <div key={issue.id}
              className="flex items-start gap-3 p-4 border border-[var(--c-border)] rounded hover:bg-[var(--c-surface-raised)]">
              <svg width="16" height="16" viewBox="0 0 16 16" fill={issue.state === 'open' ? 'var(--c-success)' : 'var(--c-muted)'}
                className="mt-0.5 shrink-0">
                <path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25-6.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 1.5 0v-3.5Z"/>
              </svg>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-[var(--c-text)]">#{issue.number} {issue.title}</p>
                <p className="text-xs text-[var(--c-muted)] mt-0.5">
                  opened by {issue.authorName} · {new Date(issue.createdAt).toLocaleDateString()}
                </p>
              </div>
              <button
                onClick={() => issue.state === 'open'
                  ? closeIssue.mutate(issue.number)
                  : reopenIssue.mutate(issue.number)
                }
                className="text-xs px-3 py-1.5 rounded border border-[var(--c-border)] text-[var(--c-muted)] hover:bg-[var(--c-surface-muted)] shrink-0 min-h-[32px]">
                {issue.state === 'open' ? 'Close' : 'Reopen'}
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}