"use client"

import { useRouter } from "next/navigation"
import { useState, type FormEvent } from "react"

function BuildingIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 48 48" fill="none" className={className} xmlns="http://www.w3.org/2000/svg">
      <rect x="6" y="16" width="36" height="28" rx="3" stroke="currentColor" strokeWidth="2" />
      <rect x="12" y="20" width="10" height="10" rx="1" fill="currentColor" opacity="0.3" />
      <rect x="26" y="20" width="10" height="10" rx="1" fill="currentColor" opacity="0.3" />
      <rect x="12" y="34" width="10" height="10" rx="1" fill="currentColor" opacity="0.3" />
      <rect x="26" y="34" width="10" height="10" rx="1" fill="currentColor" opacity="0.3" />
      <path d="M24 4L4 16H44L24 4Z" fill="currentColor" />
    </svg>
  )
}

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="none" className={className} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 6L9 17L4 12" />
    </svg>
  )
}

export default function Home() {
  const router = useRouter()
  const [apartment, setApartment] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [loading, setLoading] = useState(false)

  async function handleSubmit(e: FormEvent) {
    e.preventDefault()
    setError("")
    setLoading(true)

    const res = await fetch("/api/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ apartment, password }),
    })

    setLoading(false)

    if (!res.ok) {
      const data = await res.json()
      setError(data.error || "Ошибка входа")
      return
    }

    const data = await res.json()
    document.cookie = `tsj_auth=${data.apartment}:${data.password}; path=/; max-age=86400; SameSite=Lax`
    router.push(`/dashboard?apartment=${data.apartment}`)
  }

  return (
    <div className="flex min-h-screen flex-col bg-[#F8FAFC]">
      <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col lg:flex-row">
        <div className="flex flex-col justify-center px-6 py-12 lg:w-1/2 lg:px-12 xl:px-16">
          <div className="mx-auto w-full max-w-md">
            <div className="flex items-center gap-3">
              <img src="/logo.jpg" alt="ТСН Овражная 4" className="h-10 w-10 rounded-lg object-cover shadow-sm border border-slate-100" />
              <span
                className="text-xl font-semibold tracking-tight text-[#0F172A]"
                style={{ fontFamily: "var(--font-heading)" }}
              >
                ТСН
              </span>
            </div>

            <h1
              className="mt-8 text-pretty text-[clamp(1.5rem,4vw,2.5rem)] font-semibold leading-tight tracking-tight text-[#0F172A]"
              style={{ fontFamily: "var(--font-heading)" }}
            >
              Личный кабинет жителя
            </h1>
            <p className="mt-3 text-[clamp(0.875rem,2vw,1rem)] leading-relaxed text-[#475569]">
              Оплачивайте коммунальные услуги онлайн. Все поставщики в одном месте —
              быстро, удобно и безопасно.
            </p>

            <div className="mt-6 grid gap-3 sm:grid-cols-2">
              {[
                "Прямые договоры с поставщиками",
                "История платежей",
                "Оплата в один клик",
                "Контроль задолженностей",
              ].map((item) => (
                <div key={item} className="flex items-start gap-2">
                  <CheckIcon className="mt-0.5 h-4 w-4 shrink-0 text-[#22C55E]" />
                  <span className="text-sm text-[#475569]">{item}</span>
                </div>
              ))}
            </div>

            <div className="mt-8 rounded-xl border border-[#E2E8F0] bg-white p-5 shadow-sm">
              <p
                className="mb-3 text-xs font-semibold uppercase tracking-widest text-[#475569]"
                style={{ fontFamily: "var(--font-heading)" }}
              >
                Как это работает
              </p>
              <ol className="flex flex-col gap-2.5 text-sm text-[#475569]">
                {[
                  ["Введите номер квартиры и пароль", "Данные выданы при создании ТСН"],
                  ["Просмотрите начисления", "По каждой услуге: сумма, срок, статус"],
                  ["Оплатите онлайн", "Переход на сайт поставщика для оплаты"],
                ].map(([step, desc], i) => (
                  <li key={step} className="flex gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#0F172A] text-xs font-semibold text-white">
                      {i + 1}
                    </span>
                    <div>
                      <p className="font-medium text-[#0F172A]">{step}</p>
                      <p className="text-xs text-[#94A3B8]">{desc}</p>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          </div>
        </div>

        <div className="flex items-center justify-center px-6 pb-12 pt-8 lg:w-1/2 lg:px-12 lg:py-12 xl:px-16">
          <div className="w-full max-w-sm">
            <div className="rounded-2xl border border-[#E2E8F0] bg-white p-6 shadow-sm sm:p-8">
              <h2
                className="text-lg font-semibold text-[#0F172A]"
                style={{ fontFamily: "var(--font-heading)" }}
              >
                Войти в кабинет
              </h2>
              <p className="mb-6 text-sm text-[#475569]">
                Введите данные для входа
              </p>

              <form onSubmit={handleSubmit} className="flex flex-col gap-5">
                <div>
                  <label
                    htmlFor="apartment"
                    className="block text-sm font-medium text-[#334155]"
                  >
                    Номер квартиры
                  </label>
                  <input
                    id="apartment"
                    type="number"
                    min={1}
                    required
                    value={apartment}
                    onChange={(e) => setApartment(e.target.value)}
                    placeholder="Например: 1"
                    className="mt-1.5 block w-full rounded-lg border border-[#E2E8F0] bg-white px-4 py-2.5 text-sm text-[#0F172A] transition-colors duration-200 placeholder:text-[#94A3B8] focus:border-[#0369A1] focus:outline-none focus:ring-2 focus:ring-[#0369A1]/20"
                  />
                </div>

                <div>
                  <label
                    htmlFor="password"
                    className="block text-sm font-medium text-[#334155]"
                  >
                    Пароль
                  </label>
                  <input
                    id="password"
                    type="password"
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="Введите пароль"
                    className="mt-1.5 block w-full rounded-lg border border-[#E2E8F0] bg-white px-4 py-2.5 text-sm text-[#0F172A] transition-colors duration-200 placeholder:text-[#94A3B8] focus:border-[#0369A1] focus:outline-none focus:ring-2 focus:ring-[#0369A1]/20"
                  />
                </div>

                {error && (
                  <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">
                    {error}
                  </p>
                )}

                <button
                  type="submit"
                  disabled={loading}
                  className="cursor-pointer rounded-lg bg-[#0369A1] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-[#0284C7] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#0369A1]/50 disabled:cursor-not-allowed disabled:opacity-50"
                >
                  {loading ? "Вход..." : "Войти в кабинет"}
                </button>
              </form>
            </div>

            <p className="mt-4 text-center text-xs text-[#94A3B8]">
              Нет пароля? Обратитесь в правление ТСН
            </p>
          </div>
        </div>
      </div>

      <footer className="border-t border-[#E2E8F0] bg-white">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-6 py-4 text-xs text-[#94A3B8] sm:flex-row">
          <span>© 2026 ТСН — Личный кабинет жителя</span>
          <span>По вопросам: pravlenie@tsn.ru</span>
        </div>
      </footer>
    </div>
  )
}