import { useState, useMemo, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Responsive, WidthProvider } from 'react-grid-layout/legacy';
import { useDashboardStore } from '../store/dashboardStore';
import { useProjectStore } from '../store/projectStore';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { X, Type, AlignLeft, AlignCenter, AlignRight, Bold, Italic, Underline } from "lucide-react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
import { VegaChart } from "@/components/VegaChart";
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

const CHART_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
const TABLE_PREVIEW_LIMIT = 20;

function isNumericValue(value: unknown) {
  if (typeof value === 'number') return Number.isFinite(value);
  if (typeof value === 'string') {
    const trimmed = value.trim();
    if (!trimmed) return false;
    const parsed = Number(trimmed);
    return Number.isFinite(parsed);
  }
  return false;
}

function inferChartKeys(data: Record<string, unknown>[]) {
  if (data.length === 0) {
    return { xKey: null as string | null, yKeys: [] as string[] };
  }
  const allKeys = Object.keys(data[0] || {});
  if (allKeys.length === 0) {
    return { xKey: null as string | null, yKeys: [] as string[] };
  }
  const preferredX = ['name', 'date', 'time', 'category', 'label'];
  const xKey = preferredX.find((k) => allKeys.includes(k)) || allKeys[0];
  const candidateY = allKeys.filter((k) => k !== xKey);
  const numericY = candidateY.filter((key) => data.some((row) => isNumericValue(row[key])));
  const yKeys = (numericY.length > 0 ? numericY : candidateY).slice(0, 3);
  return { xKey, yKeys };
}

export function Dashboard() {
  const { t } = useTranslation();
  const { dashboards, activeDashboardId, removeChart, updateLayout, loadDashboards, renameDashboard, updateDashboardTitleStyle } = useDashboardStore();
  const { currentProject } = useProjectStore();

  const [isEditingTitle, setIsEditingTitle] = useState(false);
  const [editTitle, setEditTitle] = useState("");
  const titleInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (currentProject) {
      loadDashboards(currentProject.id);
    }
  }, [currentProject, loadDashboards]);

  const activeDashboard = useMemo(() => {
    return dashboards.find((d) => d.id === activeDashboardId) || dashboards[0] || null;
  }, [dashboards, activeDashboardId]);

  const charts = activeDashboard?.charts || [];

  const ResponsiveGridLayout = useMemo(
    () => WidthProvider(Responsive as any) as any,
    []
  );

  const layouts = useMemo(() => ({
    lg: charts.map((c) => c.layout)
  }), [charts]);

  const onLayoutChange = (currentLayout: any[]) => {
    if (currentProject && activeDashboard) {
      updateLayout(
        currentLayout.map((item) => ({
          i: item.i,
          x: item.x,
          y: item.y,
          w: item.w,
          h: item.h,
        })),
        activeDashboard.id,
        currentProject.id
      );
    }
  };

  const handleTitleSubmit = () => {
    if (activeDashboard && currentProject && editTitle.trim()) {
      renameDashboard(activeDashboard.id, editTitle.trim(), currentProject.id);
    }
    setIsEditingTitle(false);
  };

  const handleStyleChange = (key: string, value: string) => {
    if (activeDashboard && currentProject) {
      updateDashboardTitleStyle(activeDashboard.id, { [key]: value }, currentProject.id);
    }
  };

  if (!currentProject) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
        <p>{t('selectProjectToViewDashboard')}</p>
      </div>
    );
  }

  if (dashboards.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
        <p>{t('noDashboardsInCurrentProject')}</p>
        <p className="text-sm">{t('createDashboardToGetStarted')}</p>
      </div>
    );
  }

  if (!activeDashboard || charts.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
        <p>{t('noChartsInCurrentProject')}</p>
        <p className="text-sm">{t('goToChatToAddCharts')}</p>
      </div>
    );
  }

  return (
    <div className="p-4 h-full overflow-y-auto">
      <div className="mb-4 flex items-center justify-between group">
        {isEditingTitle ? (
          <Input
            ref={titleInputRef}
            value={editTitle}
            onChange={(e) => setEditTitle(e.target.value)}
            onBlur={handleTitleSubmit}
            onKeyDown={(e) => {
              if (e.key === 'Enter') handleTitleSubmit();
              if (e.key === 'Escape') setIsEditingTitle(false);
            }}
            className="text-2xl font-bold h-auto py-1 px-2 -ml-2 bg-transparent border-transparent hover:border-zinc-200 focus:border-indigo-500 focus:ring-indigo-500 max-w-md"
          />
        ) : (
          <div className="flex items-center gap-2">
            <h1 
              className="text-2xl font-bold cursor-pointer hover:bg-zinc-100 px-2 py-1 -ml-2 rounded transition-colors"
              style={{
                fontSize: activeDashboard.titleStyle?.fontSize || '1.5rem',
                fontWeight: activeDashboard.titleStyle?.fontWeight || '700',
                color: activeDashboard.titleStyle?.color || 'inherit',
                fontStyle: activeDashboard.titleStyle?.fontStyle || 'normal',
                textDecoration: activeDashboard.titleStyle?.textDecoration || 'none',
                textAlign: activeDashboard.titleStyle?.textAlign || 'left',
              }}
              onClick={() => {
                setEditTitle(activeDashboard.name || t('dashboardMenu'));
                setIsEditingTitle(true);
                setTimeout(() => titleInputRef.current?.focus(), 0);
              }}
            >
              {activeDashboard.name || t('dashboardMenu')}
            </h1>
            <Popover>
              <PopoverTrigger>
                <div className="h-8 w-8 flex items-center justify-center rounded-md hover:bg-zinc-100 opacity-0 group-hover:opacity-100 transition-opacity">
                  <Type className="h-4 w-4 text-zinc-500" />
                </div>
              </PopoverTrigger>
              <PopoverContent className="w-64 p-3" align="start">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-xs font-medium text-zinc-500">{t('fontSize') || 'Font Size'}</label>
                    <div className="flex items-center gap-2">
                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.25rem')}>S</Button>
                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.5rem')}>M</Button>
                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '1.875rem')}>L</Button>
                      <Button variant="outline" size="sm" onClick={() => handleStyleChange('fontSize', '2.25rem')}>XL</Button>
                    </div>
                  </div>
                  
                  <div className="space-y-2">
                    <label className="text-xs font-medium text-zinc-500">{t('textStyle') || 'Text Style'}</label>
                    <div className="flex items-center gap-2">
                      <Button 
                        variant={activeDashboard.titleStyle?.fontWeight === 'normal' ? 'default' : 'outline'} 
                        size="icon" 
                        className="h-8 w-8"
                        onClick={() => handleStyleChange('fontWeight', activeDashboard.titleStyle?.fontWeight === 'normal' ? '700' : 'normal')}
                      >
                        <Bold className="h-4 w-4" />
                      </Button>
                      <Button 
                        variant={activeDashboard.titleStyle?.fontStyle === 'italic' ? 'default' : 'outline'} 
                        size="icon" 
                        className="h-8 w-8"
                        onClick={() => handleStyleChange('fontStyle', activeDashboard.titleStyle?.fontStyle === 'italic' ? 'normal' : 'italic')}
                      >
                        <Italic className="h-4 w-4" />
                      </Button>
                      <Button 
                        variant={activeDashboard.titleStyle?.textDecoration === 'underline' ? 'default' : 'outline'} 
                        size="icon" 
                        className="h-8 w-8"
                        onClick={() => handleStyleChange('textDecoration', activeDashboard.titleStyle?.textDecoration === 'underline' ? 'none' : 'underline')}
                      >
                        <Underline className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <label className="text-xs font-medium text-zinc-500">{t('textColor') || 'Text Color'}</label>
                    <div className="flex items-center gap-2">
                      {['inherit', '#ef4444', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6'].map(color => (
                        <button
                          key={color}
                          className={`w-6 h-6 rounded-full border border-zinc-200 flex items-center justify-center ${activeDashboard.titleStyle?.color === color ? 'ring-2 ring-indigo-500 ring-offset-1' : ''}`}
                          style={{ backgroundColor: color === 'inherit' ? '#18181b' : color }}
                          onClick={() => handleStyleChange('color', color)}
                        />
                      ))}
                    </div>
                  </div>
                </div>
              </PopoverContent>
            </Popover>
          </div>
        )}
      </div>
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        rowHeight={100}
        onLayoutChange={onLayoutChange}
        isDraggable
        isResizable
      >
        {charts.map((chart) => {
          const rows = chart.data as Record<string, unknown>[];
          const columns = Object.keys(rows[0] || {});
          const previewRows = chart.type === "table" ? rows.slice(0, TABLE_PREVIEW_LIMIT) : rows;
          const isTableTruncated = chart.type === "table" && rows.length > TABLE_PREVIEW_LIMIT;
          return (
          <div key={chart.id} className="relative group">
            <Card className="h-full flex flex-col shadow-sm border-muted">
              <CardHeader className="p-3 pb-1 shrink-0 flex flex-row items-center justify-between space-y-0">
                <div>
                  <CardTitle className="text-sm">{chart.title}</CardTitle>
                  <CardDescription className="text-[10px] mt-0.5">
                    {chart.type === "table"
                      ? t('tableRowColDesc', { rowCount: rows.length, colCount: columns.length })
                      : `${chart.type.toUpperCase()} Chart`}
                  </CardDescription>
                </div>
                <Button 
                  variant="ghost" 
                  size="icon" 
                  className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity -mr-1"
                  onClick={() => removeChart(chart.id, activeDashboard.id, currentProject.id)}
                >
                  <X className="h-4 w-4" />
                </Button>
              </CardHeader>
              <CardContent className="flex-1 min-h-0 p-3 pt-1 flex flex-col">
                {(() => {
                  if (chart.type === "table") {
                    if (rows.length === 0) {
                      return (
                        <div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
                          当前表格没有可展示数据
                        </div>
                      );
                    }
                    if (columns.length === 0) {
                      return (
                        <div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
                          当前表格数据缺少可展示字段
                        </div>
                      );
                    }
                    return (
                      <div className="flex-1 w-full flex flex-col min-h-0">
                        <div className="text-[11px] text-zinc-500 mb-1 shrink-0">
                          {isTableTruncated ? t('previewTableRows', { previewLimit: TABLE_PREVIEW_LIMIT, rowCount: rows.length, colCount: columns.length }) : t('totalTableRows', { rowCount: rows.length, colCount: columns.length })}
                        </div>
                        <ScrollArea className="flex-1 w-full border border-zinc-100 rounded-md bg-white">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                {columns.map((col) => <TableHead key={col}>{col}</TableHead>)}
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {previewRows.map((row, i) => (
                                <TableRow key={i}>
                                  {columns.map((col) => (
                                    <TableCell key={`${i}-${col}`}>{String(row[col] ?? "")}</TableCell>
                                  ))}
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </ScrollArea>
                      </div>
                    );
                  }
                  if (chart.chartSpec && rows.length > 0) {
                    return (
                      <div className="flex-1 w-full overflow-hidden">
                        <VegaChart data={rows} spec={chart.chartSpec} />
                      </div>
                    );
                  }
                  const { xKey, yKeys } = inferChartKeys(rows);
                  if (!xKey || yKeys.length === 0) {
                    return (
                      <div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
                        当前图表数据缺少可绘制字段
                      </div>
                    );
                  }
                  return (
                    <ResponsiveContainer width="100%" height="100%">
                      {chart.type === 'bar' ? (
                        <BarChart data={rows}>
                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" />
                          <XAxis dataKey={xKey} tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
                          <YAxis tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
                          <Tooltip
                            cursor={{ fill: 'rgba(0,0,0,0.05)' }}
                            contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
                          />
                          {yKeys.map((key, index) => (
                            <Bar key={key} dataKey={key} fill={CHART_COLORS[index % CHART_COLORS.length]} radius={[4, 4, 0, 0]} name={key} />
                          ))}
                        </BarChart>
                      ) : (
                        <LineChart data={rows}>
                          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e5e7eb" />
                          <XAxis dataKey={xKey} tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
                          <YAxis tickLine={false} axisLine={false} tick={{ fontSize: 10, fill: '#6b7280' }} />
                          <Tooltip
                            contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
                          />
                          {yKeys.map((key, index) => (
                            <Line key={key} type="monotone" dataKey={key} stroke={CHART_COLORS[index % CHART_COLORS.length]} strokeWidth={2} dot={{ r: 3 }} />
                          ))}
                        </LineChart>
                      )}
                    </ResponsiveContainer>
                  );
                })()}
              </CardContent>
            </Card>
          </div>
        )})}
      </ResponsiveGridLayout>
    </div>
  );
}