"use client"

import type React from "react"
import { useState } from "react"
import {
  IonContent,
  IonPage,
  IonCard,
  IonCardContent,
  IonItem,
  IonLabel,
  IonInput,
  IonButton,
  IonIcon,
  IonText,
  IonSelect,
  IonSelectOption,
} from "@ionic/react"
import { personOutline, mailOutline, lockClosedOutline, medkitOutline, personAddOutline } from "ionicons/icons"

const Register: React.FC = () => {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    confirmPassword: "",
    injuryType: "",
  })

  const handleRegister = () => {
    // Логика регистрации
    console.log("Register:", formData)
  }

  const updateField = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

  return (
    <IonPage>
      <IonContent className="bg-gradient-to-br from-slate-100 via-teal-50 to-cyan-50">
        <div className="flex items-center justify-center min-h-full p-4">
          <div className="w-full max-w-md">
            {/* Заголовок */}
            <div className="text-center mb-6">
              <h1 className="text-2xl font-bold text-slate-800 mb-2">Регистрация пациента</h1>
              <p className="text-slate-600">Создайте аккаунт для начала реабилитации</p>
            </div>

            {/* Форма регистрации */}
            <IonCard className="bg-white/80 backdrop-blur-sm border border-teal-200/50 shadow-xl">
              <IonCardContent className="p-6">
                <div className="space-y-4">
                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
                    <IonIcon icon={personOutline} slot="start" className="text-teal-600" />
                    <IonLabel position="stacked" className="text-slate-700">
                      Имя
                    </IonLabel>
                    <IonInput
                      value={formData.firstName}
                      onIonInput={(e) => updateField("firstName", e.detail.value!)}
                      placeholder="Иван"
                      className="text-slate-800"
                    />
                  </IonItem>

                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
                    <IonIcon icon={personOutline} slot="start" className="text-teal-600" />
                    <IonLabel position="stacked" className="text-slate-700">
                      Фамилия
                    </IonLabel>
                    <IonInput
                      value={formData.lastName}
                      onIonInput={(e) => updateField("lastName", e.detail.value!)}
                      placeholder="Петров"
                      className="text-slate-800"
                    />
                  </IonItem>

                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
                    <IonIcon icon={mailOutline} slot="start" className="text-teal-600" />
                    <IonLabel position="stacked" className="text-slate-700">
                      Email
                    </IonLabel>
                    <IonInput
                      type="email"
                      value={formData.email}
                      onIonInput={(e) => updateField("email", e.detail.value!)}
                      placeholder="your@email.com"
                      className="text-slate-800"
                    />
                  </IonItem>

                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
                    <IonIcon icon={medkitOutline} slot="start" className="text-teal-600" />
                    <IonLabel position="stacked" className="text-slate-700">
                      Тип травмы
                    </IonLabel>
                    <IonSelect
                      value={formData.injuryType}
                      onIonChange={(e) => updateField("injuryType", e.detail.value)}
                      placeholder="Выберите тип травмы"
                      className="text-slate-800"
                    >
                      <IonSelectOption value="arm">Травма руки</IonSelectOption>
                      <IonSelectOption value="leg">Травма ноги</IonSelectOption>
                      <IonSelectOption value="back">Травма спины</IonSelectOption>
                      <IonSelectOption value="shoulder">Травма плеча</IonSelectOption>
                      <IonSelectOption value="other">Другое</IonSelectOption>
                    </IonSelect>
                  </IonItem>

                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
                    <IonIcon icon={lockClosedOutline} slot="start" className="text-teal-600" />
                    <IonLabel position="stacked" className="text-slate-700">
                      Пароль
                    </IonLabel>
                    <IonInput
                      type="password"
                      value={formData.password}
                      onIonInput={(e) => updateField("password", e.detail.value!)}
                      placeholder="••••••••"
                      className="text-slate-800"
                    />
                  </IonItem>

                  <IonItem className="bg-slate-50/50 rounded-lg border border-slate-200/50">
                    <IonIcon icon={lockClosedOutline} slot="start" className="text-teal-600" />
                    <IonLabel position="stacked" className="text-slate-700">
                      Подтвердите пароль
                    </IonLabel>
                    <IonInput
                      type="password"
                      value={formData.confirmPassword}
                      onIonInput={(e) => updateField("confirmPassword", e.detail.value!)}
                      placeholder="••••••••"
                      className="text-slate-800"
                    />
                  </IonItem>

                  <IonButton
                    expand="block"
                    onClick={handleRegister}
                    className="bg-gradient-to-r from-teal-600 to-cyan-600 mt-6"
                  >
                    <IonIcon icon={personAddOutline} slot="start" />
                    Зарегистрироваться
                  </IonButton>

                  <div className="text-center mt-4">
                    <IonText className="text-slate-600">
                      Уже есть аккаунт?{" "}
                      <a href="/login" className="text-teal-600 font-medium hover:text-teal-700">
                        Войти
                      </a>
                    </IonText>
                  </div>
                </div>
              </IonCardContent>
            </IonCard>
          </div>
        </div>
      </IonContent>
    </IonPage>
  )
}

export default Register