import { useState } from 'react'
import { Globe } from 'lucide-react'

import { Panel } from '../components/ui'
import { useSetTimeZone } from '../tools/recruitmatch/taskQueries'
import { useTaskQueue } from '../tools/recruitmatch/taskQueries'

// A short list rather than every IANA zone. These are the zones a US federal contracting firm actually
// operates in, and a searchable list of six hundred names is worse than five correct ones. The server
// validates against the full catalog regardless, so a zone typed by any other client still has to exist.
const ZONES = [
  'America/New_York',
  'America/Chicago',
  'America/Denver',
  'America/Phoenix',
  'America/Los_Angeles',
  'America/Anchorage',
  'Pacific/Honolulu',
  'UTC',
]

// The organization's working day. Owner only, because changing it moves what "today" means for every
// count in the product: the task queue, the daily report, and every period rollup.
export function TimeZonePanel() {
  const q = useTaskQueue('me', false)
  const set = useSetTimeZone()
  const current = q.data?.time_zone ?? ''
  const [choice, setChoice] = useState('')

  return (
    <Panel title="Working day" hint={current || 'loading'}>
      <p className="text-[11px] text-muted">
        Every day, week and quarter in this product is counted in this timezone. An activity logged at
        8pm Eastern is the next day in UTC, so this is what decides whether that evening's work lands on
        the day it was actually done.
      </p>
      <div className="mt-3 flex flex-wrap items-center gap-2">
        <Globe size={13} className="text-faint" />
        <select
          value={choice || current}
          onChange={(e) => setChoice(e.target.value)}
          className="rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-blue"
        >
          {[...new Set([current, ...ZONES].filter(Boolean))].map((z) => (
            <option key={z} value={z}>
              {z}
            </option>
          ))}
        </select>
        <button
          onClick={() => set.mutate(choice || current)}
          disabled={!choice || choice === current || set.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:cursor-not-allowed disabled:opacity-40"
        >
          Change
        </button>
      </div>
      {set.isError && <p className="mt-2 text-xs text-risk">{(set.error as Error).message}</p>}
      {set.isSuccess && !set.isPending && (
        <p className="mt-2 text-[11px] text-ok">
          Saved. Every count in the product now uses this day boundary.
        </p>
      )}
      <p className="mt-3 text-[10px] text-faint">
        Owner only. It is one setting per organization rather than per person, because two people seeing
        different numbers for the same desk could not reconcile them with each other or with an invoice.
      </p>
    </Panel>
  )
}