import { DateInput } from "~/components/ui/DateInput.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { ResourcePersonPicker } from "./ResourcePersonPicker.js";
import type { WizardState } from "./types.js";

interface Step2Props {
  state: WizardState;
  onChange: (patch: Partial<WizardState>) => void;
}

export function Step2Timeline({ state, onChange }: Step2Props) {
  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label className="app-label">
            Start Date *
            <InfoTooltip content="First day of the project period. Assignments and budget tracking begin from this date." />
          </label>
          <DateInput value={state.startDate} onChange={(v) => onChange({ startDate: v })} />
        </div>
        <div>
          <label className="app-label">
            End Date *
            <InfoTooltip content="Last day of the project period. Defines the timeline boundary for all assignments." />
          </label>
          <DateInput value={state.endDate} onChange={(v) => onChange({ endDate: v })} />
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label className="app-label">
            Budget (EUR)
            <InfoTooltip content="Total project budget in EUR. Stored internally as cents. Used to track spending against assignments." />
          </label>
          <input
            type="number"
            min={0}
            step={100}
            value={state.budgetEur}
            onChange={(e) => onChange({ budgetEur: e.target.value })}
            placeholder="e.g. 50000"
            className="app-input"
          />
        </div>
        <div>
          <label className="app-label">
            Responsible Person
            <InfoTooltip content="Project lead or account manager. Search by name or employee ID." />
          </label>
          <ResourcePersonPicker
            value={state.responsiblePerson}
            onChange={(v) => onChange({ responsiblePerson: v })}
          />
        </div>
      </div>

      <div>
        <label className="app-label">
          Win Probability: <strong>{state.winProbability}%</strong>
          <InfoTooltip content="Likelihood of winning this project (0-100%). Affects the weighted pipeline value: budget x probability." />
        </label>
        <input
          type="range"
          min={0}
          max={100}
          step={5}
          value={state.winProbability}
          onChange={(e) => onChange({ winProbability: parseInt(e.target.value, 10) })}
          className="w-full accent-brand-600"
        />
        <div className="flex justify-between text-xs text-gray-400 mt-0.5">
          <span>0% (Unlikely)</span>
          <span>100% (Confirmed)</span>
        </div>
      </div>
    </div>
  );
}
