"use client";

import { ContractUploadForm } from "@/features/contracts/components/forms/contract-upload-form";
import { EmptyContractsState } from "@/features/contracts/components/list/empty-contracts-state";
import { ContractsList } from "@/features/contracts/components/list/contracts-list";
import { ContractsHeader } from "@/components/layout/contacts-header";
import { useState, useEffect } from "react";
import { getContracts } from "@/features/contracts/api/contract.action";
import { motion, AnimatePresence } from "motion/react";
import {
  Upload,
  FileText,
  Sparkles,
  Shield,
  Zap,
  ChevronRight,
  Loader2,
} from "lucide-react";

export default function ContactsPage() {
  const [refreshTrigger, setRefreshTrigger] = useState(0);
  const [showContracts, setShowContracts] = useState(false);
  const [isChecking, setIsChecking] = useState(true);

  // Check if there are any existing contracts on mount
  useEffect(() => {
    const checkContracts = async () => {
      try {
        const result = await getContracts();
        if (
          result.success &&
          Array.isArray(result.contracts) &&
          result.contracts.length > 0
        ) {
          setShowContracts(true);
        }
      } catch (error) {
        console.error("Failed to check contracts:", error);
      } finally {
        setIsChecking(false);
      }
    };

    checkContracts();
  }, []);

  const handleUploadSuccess = () => {
    setRefreshTrigger((prev) => prev + 1);
    setShowContracts(true);
  };

  if (isChecking) {
    return (
      <div className="min-h-screen bg-background text-foreground relative overflow-hidden">
        {/* Ambient loading background */}
        <div className="fixed inset-0 pointer-events-none">
          <div className="absolute top-1/4 left-1/3 w-[500px] h-[500px] bg-primary/10 rounded-full blur-[120px] animate-pulse" />
          <div className="absolute bottom-1/4 right-1/3 w-[400px] h-[400px] bg-violet-500/10 rounded-full blur-[100px] animate-pulse delay-700" />
          <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_30%,transparent_100%)]" />
        </div>

        <main className="relative z-10 flex flex-col h-screen items-center justify-center">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            className="text-center space-y-6"
          >
            <div className="relative inline-flex">
              <div className="absolute inset-0 bg-primary/30 blur-2xl rounded-full" />
              <div className="relative p-6 bg-background/80 dark:bg-card/80 rounded-3xl border border-border/50 backdrop-blur-xl shadow-2xl">
                <Loader2 className="w-10 h-10 text-primary animate-spin" />
              </div>
            </div>
            <div className="space-y-2">
              <p className="text-lg font-semibold text-foreground">
                Loading workspace
              </p>
              <p className="text-sm text-muted-foreground">
                Preparing your contract environment...
              </p>
            </div>
          </motion.div>
        </main>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background text-foreground relative overflow-hidden">
      {/* Ambient Background */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-[-10%] left-[-5%] w-[600px] h-[600px] bg-primary/5 rounded-full blur-[120px]" />
        <div className="absolute top-[20%] right-[-10%] w-[500px] h-[500px] bg-violet-500/5 rounded-full blur-[100px]" />
        <div className="absolute bottom-[-10%] left-[20%] w-[400px] h-[400px] bg-emerald-500/5 rounded-full blur-[100px]" />
        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_20%,transparent_100%)]" />
      </div>

      <ContractsHeader />

      <main className="relative z-10 flex flex-col min-h-[calc(100vh-64px)]">
        <div className="flex-1 overflow-auto">
          <div className="max-w-7xl mx-auto px-6 lg:px-8 py-10 space-y-10">
            {/* Upload Section */}
            <motion.section
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1, duration: 0.5 }}
            >
              <div className="flex items-center gap-3 mb-5">
                <div className="p-2 rounded-xl bg-primary/10 border border-primary/20">
                  <Upload className="w-4 h-4 text-primary" />
                </div>
                <div>
                  <h2 className="text-xl font-bold tracking-tight">
                    Upload Contract
                  </h2>
                  <p className="text-xs text-muted-foreground">
                    PDF documents supported
                  </p>
                </div>
              </div>

              <div className="relative group">
                <div className="absolute -inset-0.5 bg-gradient-to-r from-primary/20 via-violet-500/20 to-primary/20 rounded-2xl blur opacity-30 group-hover:opacity-50 transition duration-500" />
                <div className="relative rounded-2xl border border-border/60 bg-background/60 backdrop-blur-2xl p-6 md:p-8 shadow-xl shadow-black/5">
                  <div className="mb-6 flex items-start justify-between">
                    <div className="space-y-1">
                      <h3 className="text-sm font-semibold text-foreground">
                        New Document
                      </h3>
                      <p className="text-xs text-muted-foreground max-w-md">
                        Our AI pipeline will automatically extract summaries,
                        key clauses, risk factors, and generate actionable
                        business insights.
                      </p>
                    </div>
                    <div className="hidden sm:flex items-center gap-1.5 text-[10px] font-medium px-3 py-1.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">
                      <span className="relative flex h-1.5 w-1.5">
                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
                        <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500" />
                      </span>
                      AI Ready
                    </div>
                  </div>
                  <ContractUploadForm onUploadSuccess={handleUploadSuccess} />
                </div>
              </div>
            </motion.section>

            {/* Contracts List Section */}
            <motion.section
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2, duration: 0.5 }}
            >
              <div className="flex items-center justify-between mb-5">
                <div className="flex items-center gap-3">
                  <div className="p-2 rounded-xl bg-violet-500/10 border border-violet-500/20">
                    <FileText className="w-4 h-4 text-violet-500" />
                  </div>
                  <div>
                    <h2 className="text-xl font-bold tracking-tight">
                      Your Contracts
                    </h2>
                    <p className="text-xs text-muted-foreground">
                      Manage, analyze, and query your document library
                    </p>
                  </div>
                </div>

                {showContracts && (
                  <motion.button
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    onClick={() => setRefreshTrigger((prev) => prev + 1)}
                    className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors px-3 py-1.5 rounded-lg hover:bg-muted/50"
                  >
                    <Zap className="w-3 h-3" />
                    Refresh
                  </motion.button>
                )}
              </div>

              <div className="relative rounded-2xl border border-border/40 bg-background/40 backdrop-blur-2xl overflow-hidden shadow-xl shadow-black/5 min-h-[400px]">
                <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" />

                <AnimatePresence mode="wait">
                  {showContracts ? (
                    <motion.div
                      key="list"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      className="p-6 md:p-8"
                    >
                      <ContractsList refreshTrigger={refreshTrigger} />
                    </motion.div>
                  ) : (
                    <motion.div
                      key="empty"
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      className="p-6 md:p-8"
                    >
                      <EmptyContractsState />
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </motion.section>

            {/* Bottom Info Cards */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="grid grid-cols-1 md:grid-cols-3 gap-4 pb-8"
            >
              {[
                {
                  icon: <Shield className="w-4 h-4" />,
                  title: "Secure Processing",
                  desc: "Documents are encrypted in transit and at rest. Your data never leaves your infrastructure.",
                  color: "emerald",
                },
                {
                  icon: <Sparkles className="w-4 h-4" />,
                  title: "AI Extraction",
                  desc: "Advanced NLP models identify parties, obligations, risks, and key dates automatically.",
                  color: "primary",
                },
                {
                  icon: <Zap className="w-4 h-4" />,
                  title: "Instant Insights",
                  desc: "Get executive summaries and red-flag alerts within seconds of upload completion.",
                  color: "violet",
                },
              ].map((feature, i) => (
                <motion.div
                  key={feature.title}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4 + i * 0.05 }}
                  className="group relative rounded-2xl border border-border/40 bg-background/40 backdrop-blur-xl p-5 hover:bg-background/60 transition-all duration-300"
                >
                  <div
                    className={`p-2 rounded-lg bg-${feature.color}-500/10 border border-${feature.color}-500/20 w-fit mb-3 text-${feature.color}-500`}
                  >
                    {feature.icon}
                  </div>
                  <h4 className="text-sm font-semibold mb-1">
                    {feature.title}
                  </h4>
                  <p className="text-xs text-muted-foreground leading-relaxed">
                    {feature.desc}
                  </p>
                  <ChevronRight className="w-4 h-4 text-muted-foreground/30 absolute bottom-5 right-5 group-hover:text-muted-foreground group-hover:translate-x-0.5 transition-all" />
                </motion.div>
              ))}
            </motion.div>
          </div>
        </div>
      </main>
    </div>
  );
}