import { useEffect } from 'react';
import { Controller, useFormContext, useWatch } from 'react-hook-form';
import { FhirValueSetSearch } from '../../components';
import { useValueSetServiceContext } from '../../services';
import { Input } from '../ui/input.tsx';
import { Label } from '../ui/label.tsx';
import { Textarea } from '../ui/textarea.tsx';
import { SEVERITY_OPTIONS, severityKeyForCode } from './severityOptions.ts';
import './SimpleConditionForm.css';

export interface SimpleConditionFormProps {
  isNew: boolean;
  disabled?: boolean;
}

// Presentation only - the server (Condition handlers) authorizes what a patient may write.
const SimpleConditionForm = ({ isNew, disabled }: SimpleConditionFormProps) => {
  const { control, setValue, getValues } = useFormContext();
  const { valueSetUrls } = useValueSetServiceContext();

  // transformToFhirCondition only emits onsetDateTime when onsetType === 'dateTime'.
  useEffect(() => {
    // Default onset to a date only when creating, or when the loaded onset is empty/already a date.
    // Never clobber a non-dateTime onset (e.g. a practitioner-recorded onsetAge).
    const currentOnsetType = getValues('onsetType');
    if (isNew || !currentOnsetType || currentOnsetType === 'dateTime') {
      setValue('onsetType', 'dateTime');
    }
  }, [isNew, getValues, setValue]);

  const clinicalStatus = useWatch({ control, name: 'clinicalStatus' });
  const verificationStatus = useWatch({ control, name: 'verificationStatus' });
  const recordedDate = useWatch({ control, name: 'recordedDate' });
  const category = useWatch({ control, name: 'category' });

  const readonlyRows: Array<[string, string]> = [
    ['Clinical status', (clinicalStatus as { display?: string })?.display ?? '—'],
    ['Verification', (verificationStatus as { display?: string })?.display ?? '—'],
    ['Recorded', (recordedDate as string) || '—'],
    ['Category', (Array.isArray(category) ? category[0]?.display : (category as { display?: string })?.display) ?? '—'],
  ];

  return (
    <div className="simple-condition-form">
      <div className="simple-condition-form__row">
        {/* FhirValueSetSearch registers its own Controller (name={context}) into the shared form context. */}
        <FhirValueSetSearch
          label="What's your health concern?"
          context="code"
          valueSetUrl={valueSetUrls.conditionCode}
          placeholder="Search e.g. Dizziness"
          required={true}
          multiple={false}
          disabled={disabled}
        />
      </div>

      <div className="simple-condition-form__row">
        <Label>How severe is it?</Label>
        <Controller
          name="severity"
          control={control}
          render={({ field }) => {
            const activeKey = severityKeyForCode((field.value as { code?: string })?.code);
            return (
              <div className="simple-condition-form__severity">
                {SEVERITY_OPTIONS.map((opt) => (
                  <button
                    key={opt.key}
                    type="button"
                    aria-pressed={activeKey === opt.key}
                    className={
                      activeKey === opt.key
                        ? 'simple-condition-form__severity-btn is-selected'
                        : 'simple-condition-form__severity-btn'
                    }
                    disabled={disabled}
                    onClick={() => field.onChange(opt.valueSet)}
                  >
                    {opt.label}
                  </button>
                ))}
              </div>
            );
          }}
        />
      </div>

      <div className="simple-condition-form__row">
        <Label htmlFor="onsetDateTime">When did it start?</Label>
        <Controller
          name="onsetDateTime"
          control={control}
          render={({ field }) => (
            <Input
              id="onsetDateTime"
              type="date"
              value={field.value || ''}
              onChange={(e) => { field.onChange(e); setValue('onsetType', 'dateTime'); }}
              disabled={disabled}
            />
          )}
        />
      </div>

      <div className="simple-condition-form__row">
        <Label htmlFor="note">Describe it (optional)</Label>
        <Controller
          name="note"
          control={control}
          render={({ field }) => (
            <Textarea
              id="note"
              value={field.value?.[0]?.text ?? ''}
              onChange={(e) => field.onChange(e.target.value ? [{ text: e.target.value }] : [])}
              disabled={disabled}
            />
          )}
        />
      </div>

      {!isNew && (
        <div className="simple-condition-form__readonly">
          <h4>Set by your care team</h4>
          {readonlyRows.map(([label, value]) => (
            <div className="simple-condition-form__readonly-item" key={label}>
              <span>{label}</span>
              <span>{value}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default SimpleConditionForm;