import { useState } from 'react'
import { AlertTriangle, CalendarDays, Check, Clock, Globe, Plus, UserX } from 'lucide-react'
import { Link } from 'react-router-dom'

import { ToolHeader } from '../../components/ToolHeader'
import { Modal, Panel } from '../../components/ui'
import type { RTask } from '../../lib/types'
import { recruitBrand } from './brand'
import { useCreateTask, useTaskQueue, useUpdateTask } from './taskQueries'

const inputCls =
  'w-full rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-recruit'

const chip = (on: boolean) =>
  `rounded-full px-3 py-1 text-xs font-semibold transition ${
    on
      ? 'bg-recruit/25 text-recruit shadow-[inset_0_0_0_1px_var(--color-recruit)]'
      : 'bg-navy-900 text-faint hover:text-muted border border-line/60'
  }`

const BUCKETS = [
  { key: 'overdue', label: 'Overdue', color: 'var(--color-risk)' },
  { key: 'today', label: 'Today', color: 'var(--color-warn)' },
  { key: 'soon', label: 'This week', color: 'var(--color-blue-soft)' },
  { key: 'later', label: 'Later', color: 'var(--color-muted)' },
  { key: 'none', label: 'No date', color: 'var(--color-faint)' },
] as const

// How a due date should read. Absent is not zero, and an overdue task says how late plainly rather than
// showing a negative number.
function dueText(t: RTask): string {
  if (t.due_in_days === undefined || t.due_in_days === null) return 'No due date'
  const d = t.due_in_days
  if (d < 0) return `${Math.abs(d)} day${Math.abs(d) === 1 ? '' : 's'} overdue`
  if (d === 0) return 'Due today'
  if (d === 1) return 'Due tomorrow'
  return `Due in ${d} days`
}

function Stat({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div className="rounded-xl border border-line/60 bg-navy-950/40 p-3">
      <p className="text-[10px] font-bold uppercase tracking-wider text-faint">{label}</p>
      <p className="mt-1 text-2xl font-extrabold tracking-tight" style={{ color: value > 0 ? color : undefined }}>
        {value}
      </p>
    </div>
  )
}

export function Tasks() {
  const [assignee, setAssignee] = useState('me')
  const [includeClosed, setIncludeClosed] = useState(false)
  const q = useTaskQueue(assignee, includeClosed)
  const create = useCreateTask()
  const update = useUpdateTask()

  const [open, setOpen] = useState(false)
  const [title, setTitle] = useState('')
  const [detail, setDetail] = useState('')
  const [priority, setPriority] = useState('normal')
  const [due, setDue] = useState('')

  const data = q.data

  return (
    <div className="space-y-4">
      <ToolHeader name={recruitBrand.name} tagline="My work" accent={recruitBrand.accent}>
        <button
          onClick={() => setOpen(true)}
          className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2.5 text-sm font-bold text-white hover:brightness-110"
        >
          <Plus size={14} />
          New task
        </button>
      </ToolHeader>

      <div className="flex flex-wrap items-center gap-2">
        <button className={chip(assignee === 'me')} onClick={() => setAssignee('me')}>
          Mine
        </button>
        {/* Unassigned work is what is left behind when someone leaves. It is a queue, not a footnote. */}
        <button className={chip(assignee === 'unassigned')} onClick={() => setAssignee('unassigned')}>
          Unassigned
        </button>
        <button className={chip(assignee === '')} onClick={() => setAssignee('')}>
          Everyone
        </button>
        <label className="ml-auto flex items-center gap-1.5 text-[11px] text-faint">
          <input type="checkbox" checked={includeClosed} onChange={(e) => setIncludeClosed(e.target.checked)} />
          Show closed
        </label>
        {data && (
          <span className="flex items-center gap-1.5 text-[11px] text-faint" title="Days are counted in this timezone">
            <Globe size={11} />
            {data.time_zone}
          </span>
        )}
      </div>

      {data && (
        <div className="grid gap-3 sm:grid-cols-3 lg:grid-cols-6">
          <Stat label="Overdue" value={data.overdue} color="var(--color-risk)" />
          <Stat label="Today" value={data.today} color="var(--color-warn)" />
          <Stat label="This week" value={data.soon} color="var(--color-blue-soft)" />
          <Stat label="Later" value={data.later} color="var(--color-muted)" />
          <Stat label="No date" value={data.no_due_date} color="var(--color-faint)" />
          <Stat label="Unassigned" value={data.unassigned} color="var(--color-gold)" />
        </div>
      )}

      {q.isLoading ? (
        <Panel className="grid place-items-center py-16 text-muted">Loading your work…</Panel>
      ) : q.isError ? (
        <Panel className="grid place-items-center py-16 text-warn">
          Could not load tasks. {(q.error as Error)?.message}
        </Panel>
      ) : (
        BUCKETS.map((b) => {
          const rows = (data?.tasks ?? []).filter((t) => t.bucket === b.key && (includeClosed || t.status === 'open'))
          if (rows.length === 0) return null
          return (
            <Panel key={b.key} title={b.label} hint={String(rows.length)}>
              <ul className="divide-y divide-line/50">
                {rows.map((t) => (
                  <li key={t.id} className="flex flex-wrap items-center justify-between gap-3 py-2.5">
                    <div className="min-w-0 flex-1">
                      <p className="flex items-center gap-2 text-sm font-semibold">
                        {b.key === 'overdue' && <AlertTriangle size={12} style={{ color: b.color }} />}
                        <span className={t.status !== 'open' ? 'text-faint line-through' : ''}>{t.title}</span>
                        {t.priority === 'high' && (
                          <span className="text-[10px] font-bold uppercase" style={{ color: 'var(--color-warn)' }}>
                            high
                          </span>
                        )}
                        {!t.assigned_to && t.status === 'open' && (
                          <span
                            className="flex items-center gap-1 text-[10px] font-bold uppercase"
                            style={{ color: 'var(--color-gold)' }}
                            title="Nobody owns this. It stayed when its owner left."
                          >
                            <UserX size={10} />
                            unassigned
                          </span>
                        )}
                      </p>
                      <p className="flex flex-wrap items-center gap-x-3 text-[11px] text-faint">
                        <span className="flex items-center gap-1">
                          <Clock size={10} />
                          {dueText(t)}
                        </span>
                        {t.assignee_name && <span>{t.assignee_name}</span>}
                        {t.candidate_name && <span>{t.candidate_name}</span>}
                        {t.requisition_id && t.requisition_title && (
                          <Link to={`/recruit/requisitions/${t.requisition_id}`} className="hover:text-recruit">
                            {t.requisition_title}
                          </Link>
                        )}
                      </p>
                      {t.detail && <p className="text-[11px] text-muted">{t.detail}</p>}
                    </div>
                    <div className="flex shrink-0 gap-1.5">
                      {t.status === 'open' ? (
                        <>
                          <button
                            onClick={() =>
                              update.mutate({ id: t.id, patch: { expected_updated_at: t.updated_at, status: 'done' } })
                            }
                            disabled={update.isPending}
                            className="flex items-center gap-1 rounded-lg border border-ok/50 px-2.5 py-1 text-[11px] font-semibold text-ok hover:bg-ok/10 disabled:opacity-50"
                          >
                            <Check size={11} />
                            Done
                          </button>
                          <button
                            onClick={() =>
                              update.mutate({
                                id: t.id,
                                patch: { expected_updated_at: t.updated_at, status: 'cancelled' },
                              })
                            }
                            disabled={update.isPending}
                            className="rounded-lg border border-line/60 px-2.5 py-1 text-[11px] font-semibold text-faint hover:text-ink disabled:opacity-50"
                          >
                            Cancel
                          </button>
                        </>
                      ) : (
                        // Reopening clears the completion time, which the database handles, so a reopened
                        // task never reads as finished.
                        <button
                          onClick={() =>
                            update.mutate({ id: t.id, patch: { expected_updated_at: t.updated_at, status: 'open' } })
                          }
                          disabled={update.isPending}
                          className="rounded-lg border border-line/60 px-2.5 py-1 text-[11px] font-semibold text-faint hover:text-ink disabled:opacity-50"
                        >
                          Reopen
                        </button>
                      )}
                    </div>
                  </li>
                ))}
              </ul>
            </Panel>
          )
        })
      )}

      {data && data.tasks.length === 0 && (
        <Panel className="grid place-items-center py-16 text-center text-sm text-faint">
          {assignee === 'unassigned'
            ? 'No unassigned work. Nothing has been left behind.'
            : assignee === 'me'
              ? 'Nothing on your queue. Add a task or pick one up from Unassigned.'
              : 'No open tasks anywhere.'}
        </Panel>
      )}

      {update.isError && (
        <p className="rounded-lg border border-risk/40 bg-navy-950/40 p-3 text-xs text-risk">
          {(update.error as Error).message}
        </p>
      )}

      <Modal open={open} onClose={() => setOpen(false)} title="New task">
        <div className="space-y-3">
          <label className="flex flex-col gap-1.5">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Task</span>
            <input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Chase the signed contract"
              className={inputCls}
            />
          </label>
          <div className="grid grid-cols-2 gap-3">
            <label className="flex flex-col gap-1.5">
              <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Due</span>
              <input type="datetime-local" value={due} onChange={(e) => setDue(e.target.value)} className={inputCls} />
            </label>
            <label className="flex flex-col gap-1.5">
              <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Priority</span>
              <select value={priority} onChange={(e) => setPriority(e.target.value)} className={inputCls}>
                {['low', 'normal', 'high'].map((p) => (
                  <option key={p} value={p}>
                    {p}
                  </option>
                ))}
              </select>
            </label>
          </div>
          <label className="flex flex-col gap-1.5">
            <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Detail</span>
            <textarea value={detail} onChange={(e) => setDetail(e.target.value)} rows={2} className={inputCls} />
          </label>
          <p className="text-[11px] text-faint">
            <CalendarDays size={11} className="mr-1 inline" />
            Due dates are counted in {data?.time_zone ?? 'the organization timezone'}, so a task due this
            evening is due today.
          </p>
          {create.isError && <p className="text-xs text-risk">{(create.error as Error).message}</p>}
          <div className="flex justify-end gap-2 pt-1">
            <button
              onClick={() => setOpen(false)}
              className="rounded-lg border border-line/70 px-3 py-2 text-sm font-semibold text-muted hover:text-ink"
            >
              Cancel
            </button>
            <button
              onClick={() =>
                create.mutate(
                  {
                    title,
                    detail,
                    priority,
                    due_at: due ? new Date(due).toISOString() : '',
                  },
                  {
                    onSuccess: () => {
                      setTitle('')
                      setDetail('')
                      setDue('')
                      setPriority('normal')
                      setOpen(false)
                    },
                  },
                )
              }
              disabled={!title.trim() || create.isPending}
              className="rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50"
            >
              Add task
            </button>
          </div>
        </div>
      </Modal>
    </div>
  )
}