import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "../../ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
import { Button } from "../../ui/button";
import { Input } from "../../ui/input";
import { Label } from "../../ui/label";
import { Separator } from "../../ui/separator";
import { Alert, AlertDescription } from "../../ui/alert";
import { motion } from "motion/react";
import { Loader2, LogIn, Link as LinkIcon, Info } from "lucide-react";

interface ServiceSelectionDialogProps {
  open: boolean;
  onClose: () => void;
  serviceName: string;
  onLoadPlaylists: (playlists: any[]) => void;
}

export function ServiceSelectionDialog({
  open,
  onClose,
  serviceName,
  onLoadPlaylists,
}: ServiceSelectionDialogProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [url, setUrl] = useState("");
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    setLoading(true);
    // Mock login process
    setTimeout(() => {
      const mockPlaylists = [
        { id: 1, name: "내가 좋아하는 음악", trackCount: 42, selected: false },
        { id: 2, name: "운동할 때 듣는 음악", trackCount: 28, selected: false },
        { id: 3, name: "출퇴근 플레이리스트", trackCount: 65, selected: false },
        { id: 4, name: "집중할 때", trackCount: 35, selected: false },
      ];
      onLoadPlaylists(mockPlaylists);
      setLoading(false);
      onClose();
    }, 1500);
  };

  const handleUrlSubmit = async () => {
    setLoading(true);
    // Mock URL fetch process
    setTimeout(() => {
      const mockPlaylists = [
        { id: 1, name: "공유된 플레이리스트", trackCount: 52, selected: false },
      ];
      onLoadPlaylists(mockPlaylists);
      setLoading(false);
      onClose();
    }, 1000);
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[480px]">
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.2 }}
        >
          <DialogHeader className="space-y-3">
            <DialogTitle className="flex items-center gap-2 text-2xl">
              {serviceName}에서 가져오기
            </DialogTitle>
            <DialogDescription>
              로그인하거나 URL을 입력하여 플레이리스트를 가져오세요.
            </DialogDescription>
          </DialogHeader>

          <Separator className="my-6" />

          <Tabs defaultValue="login" className="w-full">
            <TabsList className="grid w-full grid-cols-2 h-12">
              <TabsTrigger value="login" className="gap-2">
                <LogIn className="size-4" />
                로그인
              </TabsTrigger>
              <TabsTrigger value="url" className="gap-2">
                <LinkIcon className="size-4" />
                URL 입력
              </TabsTrigger>
            </TabsList>

            <TabsContent value="login" className="space-y-5 mt-6">
              <Alert>
                <Info className="size-4" />
                <AlertDescription>
                  {serviceName} 계정으로 로그인하면 모든 플레이리스트에 접근할 수 있습니다.
                </AlertDescription>
              </Alert>

              <motion.div
                className="space-y-2"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
              >
                <Label htmlFor="email">이메일 주소</Label>
                <Input
                  id="email"
                  type="email"
                  placeholder="example@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="h-11"
                />
              </motion.div>

              <motion.div
                className="space-y-2"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
              >
                <Label htmlFor="password">비밀번호</Label>
                <Input
                  id="password"
                  type="password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="h-11"
                />
              </motion.div>

              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.3 }}
              >
                <Button
                  onClick={handleLogin}
                  className="w-full h-11 shadow-md"
                  disabled={loading}
                  size="lg"
                >
                  {loading ? (
                    <>
                      <Loader2 className="size-4 mr-2 animate-spin" />
                      로그인 중...
                    </>
                  ) : (
                    <>
                      <LogIn className="size-4 mr-2" />
                      로그인하고 가져오기
                    </>
                  )}
                </Button>
              </motion.div>
            </TabsContent>

            <TabsContent value="url" className="space-y-5 mt-6">
              <Alert>
                <Info className="size-4" />
                <AlertDescription>
                  공개 플레이리스트 또는 공유된 URL을 입력하세요.
                </AlertDescription>
              </Alert>

              <motion.div
                className="space-y-2"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
              >
                <Label htmlFor="url">플레이리스트 URL</Label>
                <Input
                  id="url"
                  type="url"
                  placeholder="https://..."
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  className="h-11"
                />
              </motion.div>

              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.2 }}
              >
                <Button
                  onClick={handleUrlSubmit}
                  className="w-full h-11 shadow-md"
                  disabled={loading}
                  size="lg"
                >
                  {loading ? (
                    <>
                      <Loader2 className="size-4 mr-2 animate-spin" />
                      가져오는 중...
                    </>
                  ) : (
                    <>
                      <LinkIcon className="size-4 mr-2" />
                      URL로 가져오기
                    </>
                  )}
                </Button>
              </motion.div>
            </TabsContent>
          </Tabs>
        </motion.div>
      </DialogContent>
    </Dialog>
  );
}