import { Calendar, Clock, User } from 'lucide-react';

import { Input } from '@/components/ui/input';
import type { WalkthroughFormViewProps } from '@/components/walkthrough-form/types';

export function WalkthroughTeacherFields({ state, actions }: WalkthroughFormViewProps) {
  return (
    <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5">
      <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
        <div className="w-7 h-7 rounded-lg bg-indigo-500/20 flex items-center justify-center">
          <User size={16} className="text-indigo-400" />
        </div>
        Step 1: Enter Staff Member
      </h3>

      <div className="grid gap-3 sm:grid-cols-2 mb-4">
        <Input
          type="text"
          placeholder="Staff name"
          value={state.teacherName}
          onChange={(event) => actions.setTeacherName(event.target.value)}
          className="w-full px-4 py-2.5 bg-slate-900/70 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/30"
        />
        <Input
          type="text"
          placeholder="Classroom or role"
          value={state.classroom}
          onChange={(event) => actions.setClassroom(event.target.value)}
          className="w-full px-4 py-2.5 bg-slate-900/70 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/30"
        />
      </div>

      {state.teacherNameTrimmed && state.classroomTrimmed && (
        <div className="bg-indigo-500/10 border border-indigo-500/20 rounded-xl p-4 flex flex-col sm:flex-row sm:items-center gap-4">
          <div className="flex-1">
            <p className="text-sm font-semibold text-white">{state.teacherNameTrimmed}</p>
            <p className="text-xs text-slate-400">{state.classroomTrimmed}</p>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-1.5">
              <Calendar size={14} className="text-slate-500" />
              <Input
                type="date"
                value={state.date}
                onChange={(event) => actions.setDate(event.target.value)}
                className="h-auto w-auto bg-slate-900/70 border border-slate-600/50 rounded-lg px-2 py-1 text-xs text-white focus:outline-none focus:border-indigo-500/50"
              />
            </div>
            <div className="flex items-center gap-1.5">
              <Clock size={14} className="text-slate-500" />
              <Input
                type="time"
                value={state.time}
                onChange={(event) => actions.setTime(event.target.value)}
                className="h-auto w-auto bg-slate-900/70 border border-slate-600/50 rounded-lg px-2 py-1 text-xs text-white focus:outline-none focus:border-indigo-500/50"
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
