import { useState } from 'react'
import cgw453Image from '../assets/CGW453.PNG'

function formatCompletionDate(value) {
  if (!value) return null

  const parsed = new Date(`${value}T00:00:00`)
  if (Number.isNaN(parsed.getTime())) return String(value)

  return parsed.toLocaleDateString('en-US', {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  })
}

export default function RightPanel({
  completionDate,
  daytimeTestingToday,
  onDaytimeTestingTodayChange,
  daytimeTestingHours,
  onDaytimeTestingHoursChange,
  daytimeTestingDevice,
  onDaytimeTestingDeviceChange,
  startDateOverride,
  onStartDateOverrideChange,
  topPriorityDut,
  onTopPriorityDutChange,
  topPriorityRef,
  onTopPriorityRefChange,
  lowestPriority,
  onLowestPriorityChange,
  onRemakeSchedule,
  tonightConfigRows = [],
  loading = false,
  isViewer = false,
}) {
  const formattedCompletionDate = formatCompletionDate(completionDate)
  const [topPriorityOpen, setTopPriorityOpen] = useState(false)

  if (isViewer) {
    return (
      <aside className="flex flex-col gap-4 w-60 shrink-0 pt-8">
        <div className="flex justify-center mb-2">
          <img src={cgw453Image} alt="CGW453 Device" className="h-32 object-contain" />
        </div>

        <div>
          <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1">
            Est. Completion
          </p>
          <p className="text-lg font-bold text-white">
            {formattedCompletionDate ?? <span className="text-gray-500 text-sm font-normal">Not calculated</span>}
          </p>
        </div>
      </aside>
    )
  }

  return (
    <aside className="flex flex-col gap-4 w-60 shrink-0 pt-8">
      {/* Device Image */}
      <div className="flex justify-center mb-2">
        <img src={cgw453Image} alt="CGW453 Device" className="h-32 object-contain" />
      </div>

      {/* Estimated Completion */}
      <div>
        <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1">
          Est. Completion
        </p>
        <p className="text-lg font-bold text-white">
          {formattedCompletionDate ?? <span className="text-gray-500 text-sm font-normal">Not calculated</span>}
        </p>
      </div>

      <div>
        <div className="flex items-center justify-between gap-3">
          <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
            Day Time Testing Today
          </span>
          <button
            type="button"
            role="switch"
            aria-checked={daytimeTestingToday}
            onClick={() => onDaytimeTestingTodayChange(!daytimeTestingToday)}
            className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/70 ${
              daytimeTestingToday ? 'bg-blue-600' : 'bg-gray-600'
            }`}
            title="Toggle daytime testing for today's compile"
          >
            <span
              className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform ${
                daytimeTestingToday ? 'translate-x-4' : 'translate-x-0'
              }`}
            />
          </button>
        </div>

        <div
          className={`overflow-hidden transition-all duration-300 ease-out ${
            daytimeTestingToday
              ? 'max-h-56 opacity-100 translate-y-0 mt-3'
              : 'max-h-0 opacity-0 -translate-y-1 mt-0 pointer-events-none'
          }`}
        >
          <div>
            <label className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
              Day Time Hours (Max 8)
            </label>
            <input
              type="number"
              min="0"
              max="8"
              step="1"
              value={daytimeTestingHours}
              onChange={(e) => onDaytimeTestingHoursChange(e.target.value)}
              className="w-full bg-gray-900 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-blue-500 font-mono"
            />
          </div>

          <div className="mt-3">
            <label className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
              Day Time Device
            </label>
            <select
              value={daytimeTestingDevice}
              onChange={(e) => onDaytimeTestingDeviceChange(e.target.value)}
              className="w-full bg-gray-900 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-blue-500 font-mono"
            >
              <option value="CGW453">DUT (CGW453)</option>
              <option value="CGW452">REF (CGW452)</option>
            </select>
          </div>
        </div>
      </div>

      {/* Top priority */}
      <div>
        <button
          type="button"
          onClick={() => setTopPriorityOpen((open) => !open)}
          className="w-full flex items-center justify-between text-[11px] font-semibold uppercase tracking-wider text-gray-500 hover:text-gray-300 transition-colors"
          aria-expanded={topPriorityOpen}
          aria-controls="top-priority-section"
        >
          <span>Top Priority Tests</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className={`w-4 h-4 transition-transform duration-300 ${topPriorityOpen ? 'rotate-180' : 'rotate-0'}`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
            aria-hidden="true"
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </button>

        <div
          id="top-priority-section"
          className={`overflow-hidden transition-all duration-300 ease-out ${
            topPriorityOpen
              ? 'max-h-96 opacity-100 translate-y-0 mt-2'
              : 'max-h-0 opacity-0 -translate-y-1 mt-0 pointer-events-none'
          }`}
        >
          <div>
            <label className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
              Top Priority DUT Tests
            </label>
            <textarea
              rows={3}
              value={topPriorityDut}
              onChange={(e) => onTopPriorityDutChange(e.target.value)}
              placeholder="P2PRXAX001, COERXBE002…"
              className="w-full bg-gray-900 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-blue-500 resize-none font-mono"
            />
          </div>

          <div className="mt-3">
            <label className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
              Top Priority REF Tests 
            </label>
            <textarea
              rows={3}
              value={topPriorityRef}
              onChange={(e) => onTopPriorityRefChange(e.target.value)}
              placeholder="P2PRXAX001, COERXBE002…"
              className="w-full bg-gray-900 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 placeholder-gray-600 focus:outline-none focus:border-blue-500 resize-none font-mono"
            />
          </div>
        </div>
      </div>

      <div>
        <label className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
          Start Date Override
        </label>
        <input
          type="date"
          value={startDateOverride}
          onChange={(e) => onStartDateOverrideChange(e.target.value)}
          className="w-full bg-gray-900 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-blue-500 font-mono"
        />
      </div>

      {/* Remake schedule */}
      <button
        onClick={onRemakeSchedule}
        disabled={loading}
        className="w-full py-2 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500 border border-blue-500 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {loading ? 'Working…' : 'Remake Schedule'}
      </button>
    </aside>
  )
}
