import { useState } from "react";
import { Textarea } from "@/components/ui/textarea";
import { SignaturePad } from "./SignaturePad";
import { ArrowRight } from "lucide-react";
import { format } from "date-fns";

interface TD02Data {
  adjustments: string;
  medical_conditions: string;
  emergency_instructions: string;
  medication: string;
  it_skills: string;
  candidate_signature: string;
  date: string;
}

interface FormTD02Props {
  onComplete: (data: TD02Data) => void;
  submitLabel?: string;
}

const itSkillOptions = [
  { value: "never", label: "Never used a laptop before" },
  { value: "basic", label: "Some basic IT skills" },
  { value: "regular", label: "Use a laptop regularly" },
  { value: "daily", label: "Use a laptop every day" },
];

export const FormTD02 = ({ onComplete, submitLabel = "Continue to Candidate Induction" }: FormTD02Props) => {
  const [formData, setFormData] = useState<TD02Data>({
    adjustments: "",
    medical_conditions: "",
    emergency_instructions: "",
    medication: "",
    it_skills: "",
    candidate_signature: "",
    date: format(new Date(), "dd/MM/yyyy"),
  });

  const isValid = formData.it_skills && formData.candidate_signature;

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="rounded-xl p-4" style={{ background: "#f8fafc", border: "1px solid #e2e8f0" }}>
        <h2 className="text-base font-bold" style={{ color: "#0f172a" }}>Candidate Requirements and Medical Needs</h2>
        <p className="text-sm mt-2" style={{ color: "#64748b" }}>
          Please use this form to let us know about any requirements, changes or allowances you may need in order to complete your training. Any change in your requirements or medical needs during this Assessment or training must be reported to your Assessor or Instructor. This information is required to protect your Health and Safety, all details will be treated in line with our privacy policy.
        </p>
        <p className="text-xs mt-1" style={{ color: "#94a3b8" }}>Reference: TD-02 · Revision: 2.1</p>
      </div>

      {/* Adjustments */}
      <div className="space-y-2">
        <label className="text-sm font-semibold block" style={{ color: "#374151" }}>Adjustments</label>
        <p className="text-xs" style={{ color: "#6b7280" }}>
          A reasonable adjustment is any action that mitigates the effect of a physical or mental disability or any other difficulty that may put the learner at a disadvantage during the delivery and assessment of a qualification. This can include, but not be limited to, hearing loops, visual aids or wheelchair access.
        </p>
        <textarea
          placeholder="Please let us know about any adjustments that you would need us to make."
          value={formData.adjustments}
          onChange={(e) => setFormData(p => ({ ...p, adjustments: e.target.value }))}
          rows={3}
          className="w-full rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2"
          style={{ background: "#f9fafb", border: "1px solid #d1d5db", color: "#111827" }}
        />
      </div>

      {/* Medical Needs */}
      <div className="space-y-2">
        <label className="text-sm font-semibold block" style={{ color: "#374151" }}>Medical Needs</label>
        <p className="text-xs" style={{ color: "#6b7280" }}>
          Your safety and the safety of the other learners during our course or assessment is important to us. It is essential that you let us know about any condition you have that could affect your ability to complete your training/assessment. Examples could include diabetes or asthma.
        </p>
        <textarea
          placeholder="Please let us know about any medical conditions."
          value={formData.medical_conditions}
          onChange={(e) => setFormData(p => ({ ...p, medical_conditions: e.target.value }))}
          rows={3}
          className="w-full rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2"
          style={{ background: "#f9fafb", border: "1px solid #d1d5db", color: "#111827" }}
        />
        <textarea
          placeholder="Please include any instructions for your Trainer on how to deal with a medical emergency should the need arise."
          value={formData.emergency_instructions}
          onChange={(e) => setFormData(p => ({ ...p, emergency_instructions: e.target.value }))}
          rows={3}
          className="w-full rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2"
          style={{ background: "#f9fafb", border: "1px solid #d1d5db", color: "#111827" }}
        />
      </div>

      {/* Medication */}
      <div className="space-y-2">
        <label className="text-sm font-semibold block" style={{ color: "#374151" }}>Medication</label>
        <p className="text-xs" style={{ color: "#6b7280" }}>
          Medication can affect your ability to concentrate, your mobility or your judgement. Are you taking any medication that may affect your ability to carry out your training or assessments? This will usually be included in the medication packaging leaflet.
        </p>
        <textarea
          placeholder="Please let us know about any medication you are taking."
          value={formData.medication}
          onChange={(e) => setFormData(p => ({ ...p, medication: e.target.value }))}
          rows={3}
          className="w-full rounded-lg px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2"
          style={{ background: "#f9fafb", border: "1px solid #d1d5db", color: "#111827" }}
        />
      </div>

      {/* IT Skills */}
      <div className="space-y-3">
        <label className="text-sm font-semibold block" style={{ color: "#374151" }}>
          Use of Information Technology <span style={{ color: "#ef4444" }}>*</span>
        </label>
        <p className="text-xs" style={{ color: "#6b7280" }}>
          Our online courses will require individuals to be able to use a laptop. Please rate your IT skills to help us decide if you would be able to take part in an online course.
        </p>
        <p className="text-xs font-medium" style={{ color: "#374151" }}>Please let us know the level of your IT skills. (please tick)</p>
        <div className="space-y-2">
          {itSkillOptions.map((opt) => (
            <div
              key={opt.value}
              className="flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors"
              style={{
                border: formData.it_skills === opt.value ? "2px solid #f97316" : "1px solid #e5e7eb",
                background: formData.it_skills === opt.value ? "#fff7ed" : "#ffffff",
              }}
              onClick={() => setFormData(p => ({ ...p, it_skills: opt.value }))}
            >
              <div
                className="w-4 h-4 rounded-full border-2 flex items-center justify-center shrink-0"
                style={{
                  borderColor: formData.it_skills === opt.value ? "#f97316" : "#d1d5db",
                }}
              >
                {formData.it_skills === opt.value && (
                  <div className="w-2 h-2 rounded-full" style={{ background: "#f97316" }} />
                )}
              </div>
              <span className="text-sm font-medium" style={{ color: "#111827" }}>{opt.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Signatures */}
      <div className="space-y-4 pt-5" style={{ borderTop: "1px solid #e5e7eb" }}>
        <SignaturePad
          label={`Candidate Sign * (Date: ${formData.date})`}
          value={formData.candidate_signature}
          onChange={(sig) => setFormData(p => ({ ...p, candidate_signature: sig }))}
        />
      </div>

      <button
        className="w-full flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-semibold transition-opacity"
        disabled={!isValid}
        onClick={() => isValid && onComplete(formData)}
        style={{
          background: isValid ? "#f97316" : "#e5e7eb",
          color: isValid ? "#ffffff" : "#9ca3af",
          cursor: isValid ? "pointer" : "not-allowed",
          border: "none",
        }}
      >
        {submitLabel} <ArrowRight className="w-4 h-4" />
      </button>
    </div>
  );
};