'use client'

import { useState } from 'react'
import { uploadClockifyCsv } from './actions'

type Source = 'clockify' | 'toggl'

/**
 * Upload form for the /import page. Lives client-side only so the
 * "source" radio can rewire the date/time format selects without a
 * page reload. The actual upload is still a server action.
 *
 * Defaults per source (fallback only — both date format and time
 * format are now auto-detected from the data):
 *   - Clockify:  MM/DD/YYYY + 12h
 *   - Toggl:     YYYY-MM-DD + 24h
 */
export function UploadForm() {
  const [source, setSource] = useState<Source>('clockify')

  // Keyed by source so the select remounts with the right default
  // when the radio flips. The Date format selector is now a
  // fallback only — `parseClockifyCsv` sniffs the actual format
  // from the data and ignores this selector unless every date in
  // the CSV is ambiguous. The Time format selector was removed
  // entirely since AM/PM presence disambiguates per-string.
  const defaults =
    source === 'toggl'
      ? { date: 'YYYY-MM-DD' }
      : { date: 'MM/DD/YYYY' }

  return (
    <form
      action={uploadClockifyCsv}
      encType="multipart/form-data"
      style={{ marginTop: '1rem' }}
    >
      <fieldset
        style={{
          border: '1px solid var(--border, #d4d4d8)',
          borderRadius: 6,
          padding: '0.5rem 0.75rem',
          marginBottom: '1rem',
        }}
      >
        <legend style={{ padding: '0 0.4rem', fontSize: '0.85em' }}>
          Source
        </legend>
        <div
          style={{
            display: 'flex',
            gap: '1.25rem',
            alignItems: 'center',
            flexWrap: 'wrap',
          }}
        >
          <label
            style={{
              display: 'inline-flex',
              gap: '0.4rem',
              alignItems: 'center',
              cursor: 'pointer',
            }}
          >
            <input
              type="radio"
              name="source"
              value="clockify"
              checked={source === 'clockify'}
              onChange={() => setSource('clockify')}
            />
            Clockify
          </label>
          <label
            style={{
              display: 'inline-flex',
              gap: '0.4rem',
              alignItems: 'center',
              cursor: 'pointer',
            }}
          >
            <input
              type="radio"
              name="source"
              value="toggl"
              checked={source === 'toggl'}
              onChange={() => setSource('toggl')}
            />
            Toggl
          </label>
          <span className="muted" style={{ fontSize: '0.85em' }}>
            {source === 'toggl'
              ? 'Toggl Detailed Report — date YYYY-MM-DD, time 24h.'
              : "Clockify Detailed Report — date MM/DD/YYYY, time 12h."}
          </span>
        </div>
      </fieldset>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
          gap: '0.75rem 1rem',
          marginBottom: '1rem',
        }}
      >
        <label>
          Batch name
          <input
            name="name"
            type="text"
            placeholder={
              source === 'toggl' ? 'e.g. April 2026 (Toggl)' : 'e.g. April 2026'
            }
            required
          />
        </label>
        <label>
          CSV file
          <input name="file" type="file" accept=".csv,text/csv" required />
        </label>
        <label key={`date-${source}`}>
          Date format{' '}
          <span className="muted" style={{ fontSize: '0.78em' }}>
            (auto-detected; this is a fallback for fully-ambiguous CSVs)
          </span>
          <select name="date_format" defaultValue={defaults.date}>
            <option value="MM/DD/YYYY">MM/DD/YYYY (Clockify US default)</option>
            <option value="DD/MM/YYYY">DD/MM/YYYY (Clockify EU)</option>
            <option value="YYYY-MM-DD">YYYY-MM-DD (ISO / Toggl default)</option>
          </select>
        </label>
        <label style={{ gridColumn: 'span 2' }}>
          Notes <span className="muted">(optional)</span>
          <input name="notes" type="text" />
        </label>
      </div>
      <button type="submit">Upload and import</button>
      <p className="muted" style={{ fontSize: '0.85em', marginTop: '1rem' }}>
        {source === 'toggl'
          ? 'Toggl columns expected: Project, Client, Description, Email, Member, Start date, Start time, Stop date, Stop time, Duration. Billable is optional.'
          : 'Clockify columns expected: Project, Client, Description, Task, User, Group, Email, Tags, Billable, Start Date, Start Time, End Date, End Time, Duration (h).'}
      </p>
    </form>
  )
}