import { ArrowRight, BarChart3, BookOpen, FileText, PlayCircle } from "lucide-react";
import type { AppMenuKey } from "./AppNavigation";

interface HomeDashboardProps {
  hasAnalyses: boolean;
  onNavigate: (menu: AppMenuKey) => void;
}

export function HomeDashboard({ hasAnalyses, onNavigate }: HomeDashboardProps) {
  return (
    <main className="min-h-screen overflow-y-auto bg-slate-50 px-6 py-6">
      <div className="mx-auto flex max-w-6xl flex-col gap-6">
        <section className="rounded-lg border border-slate-200 bg-white p-6 shadow-sm">
          <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div className="max-w-2xl">
              <p className="text-xs font-semibold uppercase tracking-wide text-emerald-700">Workspace guide</p>
              <h1 className="mt-2 text-2xl font-semibold text-slate-950">Start from knowledge, then run the analysis agent.</h1>
              <p className="mt-3 text-sm leading-6 text-slate-600">
                Data Eyond needs prepared knowledge before the agent can answer with useful context. Set up documents or database connections first, then create an analysis and generate versioned reports from the result.
              </p>
            </div>
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                title="Open Knowledge untuk upload, proses dokumen, atau connect database"
                onClick={() => onNavigate("knowledge")}
                className="inline-flex items-center gap-2 rounded-md bg-slate-950 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-800"
              >
                <BookOpen className="h-4 w-4" />
                Open Knowledge
              </button>
              <button
                type="button"
                title="Open Analysis Agent untuk membuat analysis dan chat dengan AI"
                onClick={() => onNavigate("analysis-agent")}
                className="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50"
              >
                <BarChart3 className="h-4 w-4" />
                Analysis Agent
              </button>
            </div>
          </div>
        </section>

        <section className="grid gap-4 lg:grid-cols-3">
          <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-emerald-50 text-emerald-700">
              <BookOpen className="h-4 w-4" />
            </div>
            <h2 className="mt-4 text-sm font-semibold text-slate-950">1. Setup Knowledge</h2>
            <p className="mt-2 text-sm leading-6 text-slate-600">Upload documents, process them, connect databases, ingest schemas, and rebuild the catalog.</p>
          </div>
          <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-sky-50 text-sky-700">
              <BarChart3 className="h-4 w-4" />
            </div>
            <h2 className="mt-4 text-sm font-semibold text-slate-950">2. Create Analysis</h2>
            <p className="mt-2 text-sm leading-6 text-slate-600">Define objective, business questions, and bind the sources that the AI agent should use.</p>
          </div>
          <div className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
            <div className="flex h-9 w-9 items-center justify-center rounded-md bg-violet-50 text-violet-700">
              <FileText className="h-4 w-4" />
            </div>
            <h2 className="mt-4 text-sm font-semibold text-slate-950">3. Chat and Report</h2>
            <p className="mt-2 text-sm leading-6 text-slate-600">Ask questions, inspect traceability inside AI answers, then generate report versions from the sidebar.</p>
          </div>
        </section>

        <section className="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
          <div className="mb-4 flex items-center justify-between gap-3">
            <div>
              <h2 className="text-sm font-semibold text-slate-950">Product flow simulation</h2>
              <p className="mt-1 text-xs text-slate-500">A quick preview of the expected workspace sequence.</p>
            </div>
            <PlayCircle className="h-5 w-5 text-slate-400" />
          </div>
          <div className="grid gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1fr] lg:items-center">
            <div className="rounded-md border border-slate-200 bg-slate-50 p-4">
              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Knowledge</p>
              <p className="mt-2 text-sm text-slate-700">Processed PDF, CSV, and database schema are ready.</p>
            </div>
            <ArrowRight className="hidden h-4 w-4 text-slate-300 lg:block" />
            <div className="rounded-md border border-slate-200 bg-slate-50 p-4">
              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Analysis Agent</p>
              <p className="mt-2 text-sm text-slate-700">Business questions are scoped to selected sources.</p>
            </div>
            <ArrowRight className="hidden h-4 w-4 text-slate-300 lg:block" />
            <div className="rounded-md border border-slate-200 bg-slate-50 p-4">
              <p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Report</p>
              <p className="mt-2 text-sm text-slate-700">Versioned report previews stay beside the conversation.</p>
            </div>
          </div>
          {!hasAnalyses && (
            <div className="mt-4 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
              No saved analysis detected yet. Start with Knowledge, then create your first analysis in Analysis Agent.
            </div>
          )}
        </section>
      </div>
    </main>
  );
}