import { useState } from "react";
import { AudioLines } from "lucide-react";
import { toast } from "sonner";
import { supabase } from "@/integrations/supabase/client";
import { lovable } from "@/integrations/lovable/index";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export function SignIn() {
  const [mode, setMode] = useState<"in" | "up">("in");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [busy, setBusy] = useState(false);

  const oauth = async (provider: "google" | "lovable") => {
    const r = await lovable.auth.signInWithOAuth(provider, { redirect_uri: window.location.origin });
    if (r.error) toast.error("Sign-in didn't work. Please try again.");
  };

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setBusy(true);
    if (mode === "up") {
      const { data, error } = await supabase.auth.signUp({
        email, password,
        options: { emailRedirectTo: window.location.origin, data: { full_name: name.trim() } },
      });
      if (error) toast.error(error.message);
      else if (!data.session) toast.success("Check your email to confirm your account.");
    } else {
      const { error } = await supabase.auth.signInWithPassword({ email, password });
      if (error) toast.error(error.message);
    }
    setBusy(false);
  };

  return (
    <main className="mx-auto flex min-h-[85vh] max-w-md flex-col justify-center gap-6 px-6 py-10">
      <div className="space-y-2">
        <h1 className="text-4xl font-bold leading-tight tracking-tight">
          {mode === "in" ? "Welcome back." : "Create your account."} <span className="text-brand">Sign in to Codesynux.</span>
        </h1>
        <p className="text-muted-foreground">Your agents, calls and projects stay private to you.</p>
      </div>
      <div className="grid gap-3">
        <Button type="button" variant="secondary" className="h-12 rounded-2xl" onClick={() => oauth("google")}>Continue with Google</Button>
        <Button type="button" variant="secondary" className="h-12 rounded-2xl" onClick={() => oauth("lovable")}>Continue with Lovable</Button>
      </div>
      <div className="font-mono text-xs uppercase text-center text-muted-foreground">or with email</div>
      <form onSubmit={submit} className="space-y-3">
        {mode === "up" && <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" maxLength={40} required className="h-12 rounded-2xl" />}
        <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" required className="h-12 rounded-2xl" />
        <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password (6+ characters)" minLength={6} required className="h-12 rounded-2xl" />
        <Button type="submit" disabled={busy} className="h-12 w-full rounded-2xl font-semibold shadow-glow">
          {mode === "in" ? "Sign in" : "Sign up"}
        </Button>
      </form>
      <button type="button" className="text-sm text-muted-foreground underline" onClick={() => setMode(mode === "in" ? "up" : "in")}>
        {mode === "in" ? "New here? Create an account" : "Already have an account? Sign in"}
      </button>
    </main>
  );
}