"use client"

import * as React from "react"
import { useSearchParams } from "next/navigation"
import { useUrlPagination } from "@/hooks/use-url-pagination"
import { Company, CompanySize, CompanyStats } from "./types"
import { CompanyCard } from "./company-card"
import { CompanyListView } from "./company-list-view"
import { CompanyDetailModal } from "./company-detail-modal"
import { cn } from "@/lib/utils"
import { Search, LayoutGrid, List, Download, Plus, Filter, Building2, TrendingUp, DollarSign, Gem } from "lucide-react"
import { toast } from "sonner"
import { AddCompanyModal } from "./add-company-modal"
import { KPICard } from "@/components/ui/kpi-card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ReactSelect } from "@/components/ui/react-select"
import { Can } from "@/components/providers/ability-provider"

const NAMES = ['Nexus Solutions', 'BrightEdge', 'Pinnacle Marketing', 'TechNova', 'AlphaScale Co.', 'Vertex Industries', 'OmniCorp Group', 'IonPeak Digital', 'SkyBridge', 'ArcLight Media', 'CoreBase Technologies', 'GlobalTech Solutions', 'Summit Industries', 'Horizon Media', 'PrimeEdge Pvt Ltd', 'MegaCorp', 'NexGen Labs', 'BluePrint Agency', 'NovaStar Ltd', 'GridLine Systems', 'ClearPath Solutions', 'TechBridge Co.', 'Apex Corp', 'PeakLogic', 'StormFront Media', 'BridgePoint', 'SilverStream', 'CatalystX', 'VisionSpark', 'NorthStar PKG']
const INDUSTRIES = ['MarTech', 'SaaS', 'E-Commerce', 'FMCG', 'Real Estate', 'Finance', 'Logistics', 'Media', 'EdTech', 'HealthTech']
const SIZES: CompanySize[] = ['Startup', 'SME', 'Enterprise']
const REPS = [{ name: 'Zara Ahmed', av: 'ZA', team: 'alpha' as const }, { name: 'Omar Farooq', av: 'OF', team: 'alpha' as const }, { name: 'Sana Malik', av: 'SM', team: 'beta' as const }, { name: 'Bilal Khan', av: 'BK', team: 'beta' as const }, { name: 'Hira Qureshi', av: 'HQ', team: 'gamma' as const }, { name: 'Tariq Rauf', av: 'TR', team: 'gamma' as const }]
const CITIES = ['Karachi', 'Lahore', 'Islamabad', 'Rawalpindi', 'Faisalabad']
const STAGES = ['Prospecting', 'Qualified', 'Proposal Sent', 'Negotiation', 'Closed Won']
const CONTACT_NAMES = ['Ahsan Sheikh', 'Fatima Malik', 'Imran Khan', 'Sara Ahmed', 'Usman Qureshi', 'Nadia Farooq', 'Kamran Rauf', 'Ayesha Butt', 'Zaid Chaudhry', 'Huma Awan']
const TITLES = ['CEO', 'CMO', 'Head of Marketing', 'Sales Director', 'VP Sales', 'Founder']
const AVATAR_COLORS = ['#6C63FF', '#22C55E', '#F59E0B', '#FF6B6B', '#8B83FF', '#FF8C42', '#059669', '#DC2626', '#7C3AED', '#0EA5E9']

const rand = (a: any[]) => a[Math.floor(Math.random() * a.length)]
const randInt = (a: number, b: number) => Math.floor(Math.random() * (b - a + 1)) + a

const generateCompanies = (): Company[] => {
    return NAMES.map((name, i) => {
        const rep = rand(REPS)
        const size = rand(SIZES)
        return {
            id: i + 1,
            name,
            initials: name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase(),
            industry: rand(INDUSTRIES),
            size,
            city: rand(CITIES),
            rep: rep.name,
            repAv: rep.av,
            team: rep.team,
            color: AVATAR_COLORS[i % AVATAR_COLORS.length],
            deals: randInt(1, 8),
            totalVal: randInt(5, 200) * 100,
            employees: size === 'Startup' ? randInt(5, 50) : size === 'SME' ? randInt(51, 250) : randInt(251, 2000),
            revenue: `$${randInt(10, 500)}M`,
            stage: rand(STAGES),
            website: `www.${name.toLowerCase().replace(/[^a-z]/g, '')}.com`,
            founded: randInt(2010, 2022),
            contacts: [
                { name: rand(CONTACT_NAMES), title: rand(TITLES) },
                { name: rand(CONTACT_NAMES), title: rand(TITLES) },
            ]
        }
    })
}

export default function CompaniesPage() {
    const [companies, setCompanies] = React.useState<Company[]>([])
    const searchParams = useSearchParams()
    const { page, setPage, limit: pageSize, setLimit: setPageSize } = useUrlPagination(10)

    const [view, setView] = React.useState(searchParams.get("view") || "grid")
    const [search, setSearch] = React.useState(searchParams.get("search") || "")
    const [industryFilter, setIndustryFilter] = React.useState(searchParams.get("industry") || "all")
    const [sizeFilter, setSizeFilter] = React.useState(searchParams.get("size") || "all")
    const [teamFilter, setTeamFilter] = React.useState(searchParams.get("team") || "all")
    const [selectedCompany, setSelectedCompany] = React.useState<Company | null>(null)
    const [isModalOpen, setIsModalOpen] = React.useState(false)
    const [isAddModalOpen, setIsAddModalOpen] = React.useState(false)
    const [sortCol, setSortCol] = React.useState(searchParams.get("sort") || "name")
    const [sortDir, setSortDir] = React.useState(parseInt(searchParams.get("dir") || "1", 10))

    const teamFilterTriggerClass =
        "h-10 border-none bg-transparent hover:bg-bg/20 rounded-lg text-[12px] font-bold font-['Lexend_Deca'] min-w-[120px] shadow-none ring-0 focus:ring-0 px-2 gap-1.5"
    const filterContentClass = "rounded-xl border-border/40"

    const teamFilterOptions = React.useMemo(
        () => [
            { value: "all", label: "All Teams" },
            { value: "alpha", label: "🟣 Team Alpha" },
            { value: "beta", label: "🟢 Team Beta" },
            { value: "gamma", label: "🟡 Team Gamma" },
        ],
        [],
    )

    const industryFilterOptions = React.useMemo(
        () => [
            { value: "all", label: "Industries" },
            ...INDUSTRIES.map((i) => ({ value: i, label: i })),
        ],
        [],
    )

    React.useEffect(() => {
        setCompanies(generateCompanies())
    }, [])

    const filteredCompanies = companies.filter(c =>
        (search === "" || (c.name + c.industry).toLowerCase().includes(search.toLowerCase())) &&
        (industryFilter === "all" || c.industry === industryFilter) &&
        (sizeFilter === "all" || c.size === sizeFilter) &&
        (teamFilter === "all" || c.team === teamFilter)
    )

    const sortedCompanies = [...filteredCompanies].sort((a: any, b: any) => {
        let av = a[sortCol]
        let bv = b[sortCol]
        if (typeof av === 'string') {
            av = av.toLowerCase()
            bv = bv.toLowerCase()
        }
        return av < bv ? -sortDir : av > bv ? sortDir : 0
    })

    const stats: CompanyStats = {
        totalCompanies: filteredCompanies.length,
        totalDeals: filteredCompanies.reduce((s, c) => s + c.deals, 0),
        pipelineValue: filteredCompanies.reduce((s, c) => s + c.totalVal, 0),
        enterpriseAccounts: filteredCompanies.filter(c => c.size === 'Enterprise').length
    }

    const fmtUSD = (n: number) => n >= 1000 ? `$${(n / 1000).toFixed(1)}M` : `$${n}K`

    const handleOpenCompany = (company: Company) => {
        setSelectedCompany(company)
        setIsModalOpen(true)
    }

    const handleDelete = (id: number) => {
        setCompanies(companies.filter(c => c.id !== id))
        toast.error(`Company removed`)
    }

    const handleCreateCompany = (company: Partial<Company>) => {
        const newCompany: Company = {
            ...company,
            id: companies.length + 1,
            deals: 0,
            totalVal: 0,
            rep: "Zara Ahmed",
            repAv: "ZA",
            team: "alpha",
            color: AVATAR_COLORS[companies.length % AVATAR_COLORS.length],
            stage: "Prospecting"
        } as Company
        setCompanies([newCompany, ...companies])
        toast.success(`Company ${company.name} added successfully`)
    }

    return (
        <div className="flex flex-col h-full gap-4.5 p-1 sm:p-2 md:p-4 animate-in fade-in duration-500 overflow-hidden">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-border/40 pb-5">
                <div className="flex flex-col shrink-0">
                    <h1 className="text-[25px] font-extrabold text-text font-['Lexend'] tracking-tight leading-none">
                        Companies
                    </h1>
                    <p className="text-[12px] text-gray-500 mt-2 font-['Lexend_Deca'] uppercase tracking-wider">
                        <span className="font-bold text-text/80">{filteredCompanies.length} companies</span> <span className="mx-1 opacity-50">·</span> <span className="font-bold text-accent/90">Q1 2026 pipeline</span>
                    </p>
                </div>

                <div className="flex flex-wrap items-center gap-2.5 w-full md:w-auto md:justify-end min-w-0">
                    <div className="relative flex-1 min-w-[150px] md:flex-none md:w-[200px]">
                        <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
                        <Input
                            type="search"
                            placeholder="Search companies..."
                            className="pl-9 pr-3 h-10 text-[13px] bg-white/60 backdrop-blur-[15px] border-white rounded-xl w-full font-['Lexend_Deca']"
                            value={search || ""}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                    </div>

                    <div className="flex items-center gap-2">
                        {/* Teams Select */}
                        <div className="bg-white/60 backdrop-blur-[15px] border border-white rounded-xl px-1">
                            <ReactSelect
                                value={teamFilter || "all"}
                                onValueChange={setTeamFilter}
                                options={teamFilterOptions}
                                placeholder="All Teams"
                                triggerClassName={teamFilterTriggerClass}
                                contentClassName={filterContentClass}
                            />
                        </div>

                        {/* Industries Select */}
                        <div className="bg-white/60 backdrop-blur-[15px] border border-white rounded-xl px-1">
                            <ReactSelect
                                value={industryFilter || "all"}
                                onValueChange={setIndustryFilter}
                                options={industryFilterOptions}
                                placeholder="Industries"
                                triggerClassName={teamFilterTriggerClass}
                                contentClassName={filterContentClass}
                            />
                        </div>
                    </div>

                    <div className="flex items-center gap-1.5 ml-auto">
                        <div className="flex bg-bg rounded-xl p-1 border border-border shrink-0">
                            <Button
                                variant={view === 'grid' ? "default" : "ghost"}
                                size="iconToggle"
                                onClick={() => setView('grid')}
                            >
                                <LayoutGrid size={15} />
                            </Button>
                            <Button
                                variant={view === 'list' ? "default" : "ghost"}
                                size="iconToggle"
                                onClick={() => setView('list')}
                            >
                                <List size={15} />
                            </Button>
                        </div>
                        <Can action="create" subject="company">
                            <Button
                                size="sm"
                                onClick={() => setIsAddModalOpen(true)}
                            >
                                <Plus size={16} className="stroke-[2px]" /> Add Company
                            </Button>
                        </Can>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-2">
                <KPICard label="Companies" value={stats.totalCompanies.toString()} subtext="active accounts" icon={<Building2 className="text-blue-500" size={16} />} />
                <KPICard label="Total Deals" value={stats.totalDeals.toString()} subtext="across all accounts" icon={<TrendingUp className="text-green-500" size={16} />} />
                <KPICard label="Pipeline Value" value={fmtUSD(stats.pipelineValue)} subtext="total potential" icon={<DollarSign className="text-accent" size={16} />} />
                <KPICard label="Enterprise" value={stats.enterpriseAccounts.toString()} subtext="priority accounts" icon={<Gem className="text-purple-500" size={16} />} />
            </div>

            <div className="flex-1 min-h-0 overflow-hidden">
                <div className="h-full overflow-y-auto pr-1 pb-4 scrollbar-themed">
                    {view === 'grid' ? (
                        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
                            {sortedCompanies.map(c => (
                                <CompanyCard key={c.id} company={c} onClick={() => handleOpenCompany(c)} />
                            ))}
                        </div>
                    ) : (
                        <CompanyListView
                            companies={sortedCompanies}
                            onOpen={handleOpenCompany}
                            onDelete={handleDelete}
                            sortCol={sortCol || "name"}
                            sortDir={sortDir as 1 | -1}
                            onSort={(col) => {
                                if (sortCol === col) setSortDir(sortDir === 1 ? -1 : 1)
                                else { setSortCol(col); setSortDir(1); }
                            }}
                        />
                    )}
                </div>
            </div>

            <CompanyDetailModal
                company={selectedCompany}
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
            />
            <AddCompanyModal
                isOpen={isAddModalOpen}
                onClose={() => setIsAddModalOpen(false)}
                onCreate={handleCreateCompany}
                teams={[]}
            />
        </div>
    )
}