import { Head, Link } from '@inertiajs/react';
import { Clock, FileCode, Folder, Search } from 'lucide-react';
import { useState } from 'react';

import { MediaEmptyState } from '@/components/media/MediaEmptyState';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { formatDate } from '@/lib/utils';

import { show as mediaDivisionShow } from '@/routes/media/division/index';
import { index as mediaIndex, show as mediaShow } from '@/routes/media/index';

interface MediaFolder {
    id: number;
    name: string;
    division_name: string;
    files_count: number;
    last_updated: string;
    href: string;
    isDivision: boolean;
}

interface ProjectFolder {
    id: number;
    name: string;
    division_name: string;
    files_count: number;
    last_updated: string;
}

interface DivisionFolder extends ProjectFolder {
    slug: string;
    is_division: boolean;
}

interface Props {
    data: {
        projects: ProjectFolder[];
        divisions: DivisionFolder[];
    };
}

const TAB_TRIGGER_CLASS =
    'relative rounded-none border-b-2 border-transparent bg-transparent px-4 py-2.5 text-sm font-semibold whitespace-nowrap shadow-none transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-primary data-[state=active]:shadow-none';

/** Kartu folder media: proyek (amber) atau divisi (indigo). */
function FolderCard({ folder }: { folder: MediaFolder }) {
    return (
        <Link href={folder.href} className="group">
            <Card className="h-full gap-0 border-2 p-4 transition-all hover:border-primary/50 hover:shadow-sm">
                <div
                    className={
                        folder.isDivision
                            ? 'flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-100 text-indigo-600 transition-colors group-hover:bg-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-400'
                            : 'flex h-12 w-12 items-center justify-center rounded-xl bg-amber-100 text-amber-600 transition-colors group-hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-500'
                    }
                >
                    <Folder size={28} fill="currentColor" fillOpacity={0.2} />
                </div>

                <CardContent className="flex flex-col gap-3 p-0 pt-4">
                    <h3
                        className="line-clamp-2 min-h-10 font-bold transition-colors group-hover:text-primary"
                        title={folder.name}
                    >
                        {folder.name}
                    </h3>

                    <div className="flex flex-wrap items-center gap-2">
                        <Badge
                            variant="secondary"
                            className={
                                folder.isDivision
                                    ? 'bg-indigo-50 px-1.5 py-0 text-[10px] text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300'
                                    : 'px-1.5 py-0 text-[10px]'
                            }
                        >
                            {folder.division_name}
                        </Badge>
                        {folder.isDivision && (
                            <Badge
                                variant="outline"
                                className="px-1.5 py-0 text-[10px]"
                            >
                                Non-Proyek
                            </Badge>
                        )}
                    </div>

                    <div className="flex items-center justify-between text-[11px] text-muted-foreground">
                        <span className="flex items-center gap-1">
                            <FileCode size={12} />
                            {folder.files_count} file
                        </span>
                        <span className="flex items-center gap-1">
                            <Clock size={12} />
                            {formatDate(folder.last_updated)}
                        </span>
                    </div>
                </CardContent>
            </Card>
        </Link>
    );
}

export default function MediaIndex({ data }: Props) {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState<'projects' | 'divisions'>(
        'projects',
    );

    const folders: MediaFolder[] =
        activeTab === 'projects'
            ? data.projects.map((project) => ({
                  ...project,
                  href: mediaShow({ project: project.id }).url,
                  isDivision: false,
              }))
            : data.divisions.map((division) => ({
                  ...division,
                  href: mediaDivisionShow({ division: division.slug }).url,
                  isDivision: true,
              }));

    const keyword = searchQuery.toLowerCase();
    const filteredFolders = folders.filter(
        (folder) =>
            folder.name.toLowerCase().includes(keyword) ||
            folder.division_name.toLowerCase().includes(keyword),
    );

    return (
        <>
            <Head title="Media Repository" />

            <div className="flex flex-col gap-8 p-6 lg:p-8">
                <div className="flex flex-col gap-1">
                    <h1 className="text-2xl font-bold tracking-tight md:text-3xl">
                        Media Repository
                    </h1>
                    <p className="text-muted-foreground">
                        Choose a project folder to see all its attachments and
                        media.
                    </p>
                </div>

                <div className="flex flex-col gap-6">
                    <div className="relative w-full sm:max-w-md">
                        <Search
                            className="absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
                            size={18}
                        />
                        <Input
                            placeholder={
                                activeTab === 'projects'
                                    ? 'Search projects or divisions...'
                                    : 'Search division reports...'
                            }
                            className="pl-10"
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                        />
                    </div>

                    <Tabs
                        value={activeTab}
                        onValueChange={(value) => {
                            setActiveTab(value as 'projects' | 'divisions');
                            setSearchQuery('');
                        }}
                    >
                        <TabsList className="h-auto w-full justify-start gap-0 overflow-x-auto rounded-none border-b border-muted bg-transparent p-0 text-muted-foreground">
                            <TabsTrigger
                                value="projects"
                                className={TAB_TRIGGER_CLASS}
                            >
                                Folder Proyek
                            </TabsTrigger>
                            <TabsTrigger
                                value="divisions"
                                className={TAB_TRIGGER_CLASS}
                            >
                                Folder Divisi (Tugas Non-Proyek)
                            </TabsTrigger>
                        </TabsList>
                    </Tabs>
                </div>

                {filteredFolders.length > 0 ? (
                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                        {filteredFolders.map((folder) => (
                            <FolderCard
                                key={`${activeTab}-${folder.id}`}
                                folder={folder}
                            />
                        ))}
                    </div>
                ) : (
                    <MediaEmptyState
                        title={
                            activeTab === 'projects'
                                ? 'Proyek tidak ditemukan'
                                : 'Folder divisi tidak ditemukan'
                        }
                        description={
                            activeTab === 'projects'
                                ? 'Coba gunakan kata kunci pencarian yang lain.'
                                : 'Coba kata kunci lain, atau pastikan kamu anggota divisi tersebut.'
                        }
                    />
                )}
            </div>
        </>
    );
}

MediaIndex.layout = {
    breadcrumbs: [
        {
            title: 'Media',
            href: mediaIndex().url,
        },
    ],
};