"use client";

import Link from "next/link";
import { useState } from "react";
import { AlertCircle, CheckCircle2 } from "lucide-react";
import { LogoIcon } from "@/components/ui/logo";

const BACKEND = process.env.NEXT_PUBLIC_AUTH_BASE_URL ?? "";

function GoogleIcon() {
  return (
    <svg viewBox="0 0 24 24" className="h-5 w-5 shrink-0" aria-hidden="true">
      <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
      <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
      <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05" />
      <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
    </svg>
  );
}

const benefits = [
  "Automatic transcription for every Google Meet",
  "AI-generated summaries and key decisions",
  "Speaker identification and action items",
  "Searchable meeting history in one place",
];

export default function LoginPage() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleGoogleSignIn = () => {
    try {
      setLoading(true);
      setError(null);
      const frontendCallback = `${window.location.origin}/auth/callback`;
      window.location.href = `${BACKEND}/login?redirect_uri=${encodeURIComponent(frontendCallback)}`;
    } catch {
      setError("Failed to initiate sign in. Please try again.");
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="w-full max-w-4xl bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden flex flex-col md:flex-row">

        {/* ── Left panel ── */}
        <div className="flex-1 bg-blue-600 p-10 flex flex-col justify-between">
          {/* Logo */}
          <div className="flex items-center gap-2.5">
            <LogoIcon size={32} />
            <span className="text-lg font-semibold text-white">IIH Notetaker</span>
          </div>

          {/* Headline */}
          <div className="space-y-6 py-10">
            <h1 className="text-3xl font-bold text-white leading-snug">
              Your meetings,<br />
              captured and<br />
              summarised.
            </h1>
            <p className="text-blue-100 text-sm leading-relaxed max-w-xs">
              Stop taking notes. Let IIH Notetaker handle transcription, summaries and action items — automatically.
            </p>

            {/* Benefits */}
            <ul className="space-y-3">
              {benefits.map((b) => (
                <li key={b} className="flex items-start gap-2.5">
                  <CheckCircle2 className="h-4 w-4 text-blue-300 shrink-0 mt-0.5" />
                  <span className="text-sm text-blue-100">{b}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Quote */}
          <div className="border-t border-blue-500 pt-6">
            <p className="text-sm text-blue-200 italic leading-relaxed">
              "Saves our team hours every week. The summaries are always spot on."
            </p>
            <p className="text-xs text-blue-300 mt-2 font-medium">— Sarah K., Product Manager</p>
          </div>
        </div>

        {/* ── Right panel ── */}
        <div className="flex-1 p-10 flex flex-col justify-center max-w-sm mx-auto w-full">
          <div className="space-y-8">

            {/* Heading */}
            <div className="space-y-1.5">
              <h2 className="text-2xl font-bold text-gray-900">Welcome back</h2>
              <p className="text-sm text-gray-500">Sign in to access your meeting notes</p>
            </div>

            {/* Error */}
            {error && (
              <div className="flex items-start gap-2.5 rounded-lg border border-red-200 bg-red-50 px-4 py-3">
                <AlertCircle className="h-4 w-4 text-red-500 mt-0.5 shrink-0" />
                <p className="text-sm text-red-700">{error}</p>
              </div>
            )}

            {/* Google button */}
            <button
              type="button"
              onClick={handleGoogleSignIn}
              disabled={loading}
              className="w-full flex items-center justify-center gap-3 h-11 rounded-lg border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-60 shadow-sm"
            >
              {loading ? (
                <span className="h-5 w-5 rounded-full border-2 border-gray-300 border-t-blue-600 animate-spin" />
              ) : (
                <GoogleIcon />
              )}
              {loading ? "Signing in…" : "Continue with Google"}
            </button>

            {/* Divider */}
            <div className="flex items-center gap-3">
              <div className="flex-1 h-px bg-gray-200" />
              <span className="text-xs text-gray-400">Secure sign-in via Google</span>
              <div className="flex-1 h-px bg-gray-200" />
            </div>

            {/* Stats */}
            <div className="grid grid-cols-3 gap-4 text-center">
              {[
                { value: "10k+",  label: "Meetings" },
                { value: "500+",  label: "Teams" },
                { value: "99.9%", label: "Uptime" },
              ].map(({ value, label }) => (
                <div key={label}>
                  <p className="text-base font-bold text-gray-900">{value}</p>
                  <p className="text-xs text-gray-400 mt-0.5">{label}</p>
                </div>
              ))}
            </div>

            {/* Terms */}
            <p className="text-center text-xs text-gray-400">
              By signing in, you agree to our{" "}
              <Link href="/terms-of-service?from=/login" className="text-gray-600 hover:text-gray-900 underline underline-offset-2">Terms</Link>
              {" "}and{" "}
              <Link href="/privacy-policy?from=/login" className="text-gray-600 hover:text-gray-900 underline underline-offset-2">Privacy Policy</Link>
            </p>
          </div>
        </div>

      </div>
    </div>
  );
}