/**
 * LoginPage — 계약 병원 전용 로그인 (스캐폴딩).
 *
 * 현재 상태:
 *  - UI·라우트 스캐폴딩만 제공합니다. 실제 Supabase Auth 연동은 후속 작업입니다.
 *  - 제출 시 안내 메시지만 표시하고, 리드는 문의하기로 유도합니다.
 *
 * 향후 작업:
 *  - Supabase `signInWithPassword` 연동
 *  - 세션 훅 (`useSession`) + ProtectedRoute 적용
 *  - 로그인 후 대시보드 리다이렉트
 */
import { useState, type FormEvent } from 'react';
import { Link } from 'react-router';
import { ArrowRight } from 'lucide-react';
import { buildContactMailto } from '@/shared/lib/contact';
import { Button } from '@/shared/ui/button';
import { Input } from '@/shared/ui/input';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [notice, setNotice] = useState<string | null>(null);

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    setNotice(
      '로그인 기능은 준비 중입니다. 계약을 희망하시는 경우 contact@o2o.kr 로 문의 주세요.',
    );
  };

  return (
    <section className="min-h-screen pt-32 pb-20 px-6 bg-gradient-to-b from-indigo-50/60 via-white to-white">
      <div className="max-w-md mx-auto">
        {/* 헤드라인 */}
        <div className="text-center mb-8">
          <Link
            to="/"
            className="font-serif text-3xl font-black tracking-[0.05em] bg-gradient-to-r from-[#4F1DA1] to-[#021341] bg-clip-text text-transparent"
          >
            INFINITH
          </Link>
          <h1 className="text-2xl font-serif font-bold text-primary-900 mt-6 mb-2">
            계약 병원 전용 로그인
          </h1>
          <p className="text-sm text-slate-500 break-keep leading-relaxed">
            계약 완료 시 별도 제공되는 자격 정보로 로그인하실 수 있습니다.
          </p>
        </div>

        {/* 준비중 배너 */}
        <div className="mb-6 rounded-2xl bg-amber-50/80 border border-amber-200 p-4 text-center">
          <p className="text-xs font-semibold text-amber-800 break-keep leading-relaxed">
            현재 로그인 기능은 준비 중입니다.
            <br />
            신규 도입 문의는 하단 "문의하기"를 이용해 주세요.
          </p>
        </div>

        {/* 폼 카드 */}
        <form
          onSubmit={handleSubmit}
          className="rounded-3xl bg-white border border-slate-200 shadow-sm p-8 space-y-5"
        >
          <div>
            <label
              htmlFor="login-email"
              className="block text-xs font-semibold text-slate-600 mb-2"
            >
              이메일
            </label>
            <Input
              id="login-email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="clinic@example.com"
              className="w-full px-4 py-3 h-auto text-sm bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent/40 text-primary-900 placeholder:text-slate-400 transition-all"
              autoComplete="email"
            />
          </div>

          <div>
            <label
              htmlFor="login-password"
              className="block text-xs font-semibold text-slate-600 mb-2"
            >
              비밀번호
            </label>
            <Input
              id="login-password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              className="w-full px-4 py-3 h-auto text-sm bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent/40 text-primary-900 placeholder:text-slate-400 transition-all"
              autoComplete="current-password"
            />
          </div>

          <Button
            type="submit"
            className="w-full px-6 py-3 h-auto text-sm font-bold text-white rounded-full bg-gradient-to-r from-brand-purple to-brand-purple-deep shadow-sm hover:opacity-90 transition-all"
          >
            로그인
            <ArrowRight className="w-4 h-4" />
          </Button>

          {notice && (
            <div
              role="status"
              className="text-xs text-slate-600 text-center bg-slate-50 rounded-xl p-3 leading-relaxed break-keep"
            >
              {notice}
            </div>
          )}
        </form>

        {/* 하단 문의하기 */}
        <div className="mt-6 text-center">
          <p className="text-xs text-slate-500 mb-2">계약을 원하시나요?</p>
          <a
            href={buildContactMailto('도입 문의 (LoginPage)')}
            className="inline-flex items-center gap-1 text-sm font-semibold text-[#4F1DA1] hover:text-[#021341] transition-colors underline-offset-4 hover:underline"
          >
            문의하기 →
          </a>
        </div>
      </div>
    </section>
  );
}
