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,
  startDateOverride,
  onStartDateOverrideChange,
  topPriority,
  onTopPriorityChange,
  lowestPriority,
  onLowestPriorityChange,
  onRemakeSchedule,
  tonightConfigRows = [],
  loading = false,
}) {
  const formattedCompletionDate = formatCompletionDate(completionDate)

  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>

      {/* Top priority */}
      <div>
        <label className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
          Top Priority Tests
        </label>
        <textarea
          rows={3}
          value={topPriority}
          onChange={(e) => onTopPriorityChange(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>
        <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>
  )
}
