'use client';

import { Check, ChevronDown, ExternalLink, SquarePen } from 'lucide-react';
import { useState } from 'react';

interface Company {
    id: string;
    name: string;
    domain: string;
    phone: string;
    isPrimary?: boolean;
}

const companiesData: Company[] = [
    {
        id: '1',
        name: 'Education Hub',
        domain: 'www.educationhub.com',
        phone: '+880-1647-478541',
        isPrimary: true,
    },
    {
        id: '2',
        name: 'Tech Solutions Ltd',
        domain: 'www.techsolutions.com',
        phone: '+880-1234-567890',
    },
    {
        id: '3',
        name: 'Global Innovations',
        domain: 'www.globalinnovations.io',
        phone: '+880-9876-543210',
    },
    {
        id: '4',
        name: 'Digital Ventures',
        domain: 'www.digitalventures.net',
        phone: '+880-5555-123456',
    },
];

export default function ContactCompanies() {
    const [isExpanded, setIsExpanded] = useState(false);
    const primaryCompany = companiesData.find((c) => c.isPrimary);
    const otherCompanies = companiesData.filter((c) => !c.isPrimary);
    const displayedCompanies = isExpanded ? otherCompanies : [];

    return (
        <div className="min-h-[20vh]">
            <div className="mx-auto max-w-2xl">
                <div className="overflow-hidden rounded-2xl border border-slate-200/60 bg-background">
                    {/* Header */}
                    <div className="flex items-start justify-between border-b border-slate-100 px-4 py-3">
                        <div className="">
                            <h3 className="text-lg font-semibold text-primary">Companies</h3>
                        </div>
                        <button
                            className="rounded-lg transition-all duration-200 hover:scale-105 hover:bg-slate-100 active:scale-95"
                            aria-label="Add company"
                        >
                            <SquarePen className="h-4 w-4" />
                        </button>
                    </div>

                    {/* Primary Company Card */}
                    {primaryCompany && (
                        <div className="m-3 rounded-md border bg-muted">
                            <div className="flex items-center justify-between">
                                <span className="p-2 text-sm font-semibold tracking-wide text-slate-700">Primary Company</span>
                                <button className="rounded-md p-1.5 transition-colors hover:bg-background" aria-label="Edit company">
                                    <ExternalLink className="h-4 w-4" />
                                </button>
                            </div>

                            <div className="space-y-3.5 bg-background p-2">
                                <div className="flex items-start justify-between">
                                    <span className="min-w-[140px] text-sm font-medium">Name:</span>
                                    <div className="flex flex-1 items-center justify-end gap-2">
                                        <span className="text-sm font-medium underline">{primaryCompany.name}</span>
                                        <div className="rounded-full bg-blue-500 p-0.5">
                                            <Check className="h-2 w-2 text-white" strokeWidth={3} />
                                        </div>
                                    </div>
                                </div>

                                <div className="flex items-center justify-between">
                                    <span className="min-w-[140px] text-sm font-medium">Company Domain Name:</span>
                                    <span className="text-sm font-medium">{primaryCompany.domain}</span>
                                </div>

                                <div className="flex items-center justify-between">
                                    <span className="min-w-[140px] text-sm font-medium">Phone Number:</span>
                                    <span className="text-sm font-medium">{primaryCompany.phone}</span>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Other Companies - Expandable */}
                    {isExpanded && (
                        <div className="space-y-4 pb-4 duration-300 animate-in slide-in-from-top-2">
                            {displayedCompanies.map((company, index) => (
                                <div
                                    className="m-3 rounded-md border bg-muted"
                                    key={index}
                                    style={{
                                        animationDelay: `${index * 50}ms`,
                                        opacity: 0,
                                        animation: `fadeInUp 0.3s ease-out ${index * 50}ms forwards`,
                                    }}
                                >
                                    <div className="flex items-center justify-between">
                                        <span className="p-2 text-sm font-semibold tracking-wide text-slate-700">
                                            {company?.isPrimary ? 'Primary Company' : 'Other'}
                                        </span>
                                        <button className="rounded-md p-1.5 transition-colors hover:bg-background" aria-label="Edit company">
                                            <ExternalLink className="h-4 w-4" />
                                        </button>
                                    </div>

                                    <div className="space-y-3.5 bg-background p-2">
                                        <div className="flex items-start justify-between">
                                            <span className="min-w-[140px] text-sm font-medium">Name:</span>
                                            <div className="flex flex-1 items-center justify-end gap-2">
                                                <span className="text-sm font-medium underline">{company?.name}</span>
                                                <div className="rounded-full bg-blue-500 p-0.5">
                                                    <Check className="h-2 w-2 text-white" strokeWidth={3} />
                                                </div>
                                            </div>
                                        </div>

                                        <div className="flex items-center justify-between">
                                            <span className="min-w-[140px] text-sm font-medium">Company Domain Name:</span>
                                            <span className="text-sm font-medium">{company?.domain}</span>
                                        </div>

                                        <div className="flex items-center justify-between">
                                            <span className="min-w-[140px] text-sm font-medium">Phone Number:</span>
                                            <span className="text-sm font-medium">{company?.phone}</span>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}

                    {/* See More Button */}
                    <div className="px-6 pb-2">
                        <button
                            onClick={() => setIsExpanded(!isExpanded)}
                            className="group flex w-full items-center justify-center gap-2 rounded-lg py-2.5 text-sm font-medium text-slate-700 transition-all duration-200 hover:bg-slate-50 hover:text-slate-900"
                        >
                            <span>{isExpanded ? 'Show Less' : 'See More'}</span>
                            <ChevronDown className={`h-4 w-4 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`} />
                        </button>
                    </div>
                </div>
            </div>

            <style>{`
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            `}</style>
        </div>
    );
}