'use client';

import Link from 'next/link';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import { toast } from '@/lib/toast';
import {
  getDevItems,
  DevItem,
  DevItemStatus,
  DevItemPriority,
} from '@/services/api/devtracker';
import { ApiClientError } from '@/lib/api-client';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { CalendarRange } from 'lucide-react';
import { colors, typography } from '@/styles/theme';
import { DevtrackerGantt } from '@/features/devtracker/components/DevtrackerGantt';

export default function DevtrackerDashboardPage() {
  const { t, locale } = useTranslation();
  const { isReady } = useAuthGuard();
  const [loading, setLoading] = useState(true);
  const [items, setItems] = useState<DevItem[]>([]);

  const loadDashboard = useCallback(async () => {
    try {
      setLoading(true);
      const result = await getDevItems({ page: 1, pageSize: 100 });
      setItems(result.items);
    } catch (error) {
      if (error instanceof ApiClientError) {
        toast.error(error.message);
      } else {
        toast.error(t.devtracker?.toast?.loadFailed);
      }
    } finally {
      setLoading(false);
    }
  }, [t.devtracker?.toast?.loadFailed]);

  useEffect(() => {
    if (!isReady) return;
    loadDashboard();
  }, [isReady, loadDashboard]);

  const requirementItems = useMemo(() => {
    return items
      .filter((item) =>
        [DevItemStatus.DRAFT, DevItemStatus.REVIEWED].includes(item.status),
      )
      .slice(0, 6);
  }, [items]);

  const developmentItems = useMemo(() => {
    return items.filter((item) => item.status === DevItemStatus.IN_DEVELOPMENT).slice(0, 6);
  }, [items]);

  const testingItems = useMemo(() => {
    return items.filter((item) => item.status === DevItemStatus.IN_TESTING).slice(0, 6);
  }, [items]);

  const completedItems = useMemo(() => {
    return items.filter((item) => item.status === DevItemStatus.DONE).slice(0, 10);
  }, [items]);

  const getStatusLabel = (status: DevItemStatus) => {
    return t.devtracker?.status?.[status] || status;
  };

  const getPriorityLabel = (priority: DevItemPriority) => {
    return t.devtracker?.priority?.[priority] || priority;
  };

  if (!isReady) {
    return (
      <div className="min-h-[60vh] flex items-center justify-center text-gray-400">
        {t.devtracker?.loading}
      </div>
    );
  }

  return (
    <div className="space-y-6 pb-6">
      <div className="bg-white border-b" style={{ borderColor: colors.border }}>
        <div className="px-6 h-12 flex items-center justify-between">
          <h1 className={typography.h4}>{t.devtracker?.dashboard?.title}</h1>
        </div>
      </div>

      <div className="px-6 space-y-6">
        

        <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-base flex items-center gap-2 text-gray-900">
            <CalendarRange className="w-4 h-4 text-blue-600" />
          </CardTitle>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="text-center text-gray-400">{t.devtracker?.loading}</div>
          ) : (
            <div className="space-y-4">
              <DevtrackerGantt items={items} locale={locale} t={t} />
              <div className="text-right">
                <Link href="/devtracker/gantt" className="text-sm text-blue-600 hover:underline">
                  {t.devtracker?.dashboard?.viewAll}
                </Link>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

        <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base text-gray-900">{t.devtracker?.dashboard?.requirements}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {loading ? (
                <div className="text-center text-gray-400">{t.devtracker?.loading}</div>
              ) : requirementItems.length === 0 ? (
                <div className="text-center text-gray-400">{t.devtracker?.empty?.items}</div>
              ) : (
                <div className="space-y-3">
                  <div className="grid grid-cols-1 gap-3">
                    {requirementItems.map((item) => (
                      <Link
                        key={item.id}
                        href={`/devtracker/items/${item.id}`}
                        className="border border-gray-100 rounded-lg p-3 bg-white hover:border-blue-200 hover:shadow-sm transition"
                      >
                        <div className="flex items-start justify-between gap-2">
                          <div>
                            <div className="text-sm font-medium text-gray-900">{item.code}</div>
                            <div className="text-xs text-gray-500 mt-1">
                              {t.devtracker?.fields?.moduleKey} {item.moduleKey || '-'}
                            </div>
                          </div>
                          <Badge variant="secondary">{getStatusLabel(item.status)}</Badge>
                        </div>
                        <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
                          <Badge variant="outline">{getPriorityLabel(item.priority)}</Badge>
                        </div>
                      </Link>
                    ))}
                  </div>
                  <div className="text-right">
                    <Link href="/devtracker/items" className="text-sm text-blue-600 hover:underline">
                      {t.devtracker?.dashboard?.viewAll}
                    </Link>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base text-gray-900">{t.devtracker?.dashboard?.development}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {loading ? (
                <div className="text-center text-gray-400">{t.devtracker?.loading}</div>
              ) : developmentItems.length === 0 ? (
                <div className="text-center text-gray-400">{t.devtracker?.empty?.items}</div>
              ) : (
                <div className="space-y-3">
                  <div className="grid grid-cols-1 gap-3">
                    {developmentItems.map((item) => (
                      <Link
                        key={item.id}
                        href={`/devtracker/items/${item.id}`}
                        className="border border-gray-100 rounded-lg p-3 bg-white hover:border-blue-200 hover:shadow-sm transition"
                      >
                        <div className="flex items-start justify-between gap-2">
                          <div>
                            <div className="text-sm font-medium text-gray-900">{item.code}</div>
                            <div className="text-xs text-gray-500 mt-1">
                              {t.devtracker?.fields?.moduleKey} {item.moduleKey || '-'}
                            </div>
                          </div>
                          <Badge variant="secondary">{getStatusLabel(item.status)}</Badge>
                        </div>
                        <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
                          <Badge variant="outline">{getPriorityLabel(item.priority)}</Badge>
                        </div>
                      </Link>
                    ))}
                  </div>
                  <div className="text-right">
                    <Link href="/devtracker/items" className="text-sm text-blue-600 hover:underline">
                      {t.devtracker?.dashboard?.viewAll}
                    </Link>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-base text-gray-900">{t.devtracker?.dashboard?.testing}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {loading ? (
                <div className="text-center text-gray-400">{t.devtracker?.loading}</div>
              ) : testingItems.length === 0 ? (
                <div className="text-center text-gray-400">{t.devtracker?.empty?.items}</div>
              ) : (
                <div className="space-y-3">
                  <div className="grid grid-cols-1 gap-3">
                    {testingItems.map((item) => (
                      <Link
                        key={item.id}
                        href={`/devtracker/items/${item.id}`}
                        className="border border-gray-100 rounded-lg p-3 bg-white hover:border-blue-200 hover:shadow-sm transition"
                      >
                        <div className="flex items-start justify-between gap-2">
                          <div>
                            <div className="text-sm font-medium text-gray-900">{item.code}</div>
                            <div className="text-xs text-gray-500 mt-1">
                              {t.devtracker?.fields?.moduleKey} {item.moduleKey || '-'}
                            </div>
                          </div>
                          <Badge variant="secondary">{getStatusLabel(item.status)}</Badge>
                        </div>
                        <div className="mt-2 flex items-center gap-2 text-xs text-gray-500">
                          <Badge variant="outline">{getPriorityLabel(item.priority)}</Badge>
                        </div>
                      </Link>
                    ))}
                  </div>
                  <div className="text-right">
                    <Link href="/devtracker/items" className="text-sm text-blue-600 hover:underline">
                      {t.devtracker?.dashboard?.viewAll}
                    </Link>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base text-gray-900">{t.devtracker?.dashboard?.completed}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {loading ? (
              <div className="text-center text-gray-400">{t.devtracker?.loading}</div>
            ) : completedItems.length === 0 ? (
              <div className="text-center text-gray-400">{t.devtracker?.empty?.items}</div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
              {completedItems.map((item) => (
                <div key={item.id} className="flex items-start justify-between gap-3 border border-gray-100 rounded-lg px-3 py-2">
                  <div>
                    <Link
                      href={`/devtracker/items/${item.id}`}
                      className="text-sm font-medium text-gray-900 hover:text-blue-600"
                    >
                      {item.code}
                    </Link>
                    <div className="text-xs text-gray-500 mt-1">
                      {t.devtracker?.fields?.moduleKey} {item.moduleKey || '-'}
                    </div>
                  </div>
                  <Badge variant="secondary">{getStatusLabel(item.status)}</Badge>
                </div>
              ))}
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}