import { createFileRoute } from "@tanstack/react-router";
import { ArrowDownRight, ArrowUpRight, Download, FileText } from "lucide-react";
import { Button } from "@/components/ui/button";
import { PageHeader, Section, SectionHeading } from "@/components/site/PageHeader";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export const Route = createFileRoute("/investors")({
  head: () => ({
    meta: [
      { title: "Investor Relations & Financial Reports | Seed Co Group" },
      {
        name: "description",
        content:
          "Seed Co Group investor information: share price trends for SCIL.bw, SCIL.zw and SEED.zw, shareholder circulars, analyst coverage and financial reports.",
      },
      { property: "og:title", content: "Investor Relations | Seed Co Group" },
      { property: "og:description", content: "Share price trends, circulars, analyst coverage and financial reports." },
    ],
  }),
  component: InvestorsPage,
});

const TICKERS = [
  { code: "SCIL.bw", market: "Botswana Stock Exchange", price: "BWP 8.42", change: "+2.4%", up: true },
  { code: "SCIL.zw", market: "Victoria Falls Stock Exchange", price: "USD 0.31", change: "+1.1%", up: true },
  { code: "SEED.zw", market: "Zimbabwe Stock Exchange", price: "ZWG 14.75", change: "-0.8%", up: false },
];

const INDICES = [
  { name: "BSE Domestic Company Index", value: "9,214", change: "+0.6%" },
  { name: "ZSE All Share Index", value: "212,480", change: "-0.3%" },
  { name: "VFEX All Share Index", value: "108.4", change: "+0.9%" },
];

const SERIES = [42, 46, 44, 51, 58, 55, 63, 68, 66, 74, 79, 84];

const SCIL_REPORTS = [
  { title: "SCIL Interim Results | six months to 30 September 2026", date: "2026-08-14", type: "PDF" },
  { title: "SCIL Full-Year Results | year to 31 March 2026", date: "2026-06-26", type: "PDF" },
  { title: "SCIL Results Presentation | FY2026", date: "2026-06-26", type: "Deck" },
  { title: "SCIL Abridged Audited Financial Statements FY2026", date: "2026-06-20", type: "PDF" },
];

const SCL_REPORTS = [
  { title: "SCL Interim Results | six months to 30 September 2026", date: "2026-08-12", type: "PDF" },
  { title: "SCL Full-Year Results | year to 31 March 2026", date: "2026-06-24", type: "PDF" },
  { title: "SCL Results Presentation | FY2026", date: "2026-06-24", type: "Deck" },
];

const CIRCULARS = [
  { title: "Notice of Annual General Meeting 2026", date: "2026-07-30" },
  { title: "Shareholder Circular | dividend declaration", date: "2026-06-28" },
  { title: "Trading update | third quarter FY2026", date: "2026-02-18" },
];

const ANALYSTS = [
  { firm: "Imara Africa Securities", coverage: "SCIL.bw", rating: "Buy" },
  { firm: "IH Securities", coverage: "SEED.zw", rating: "Hold" },
  { firm: "Morgan & Co Research", coverage: "SCIL.zw", rating: "Buy" },
];

function ReportList({ items }: { items: { title: string; date: string; type: string }[] }) {
  return (
    <ul className="divide-y divide-border rounded-xl border border-border bg-card shadow-card">
      {items.map((r) => (
        <li key={r.title} className="flex flex-wrap items-center justify-between gap-3 p-5">
          <div className="flex items-start gap-3">
            <FileText aria-hidden="true" className="mt-0.5 size-5 shrink-0 text-primary" />
            <div>
              <p className="font-semibold">{r.title}</p>
              <time dateTime={r.date} className="text-xs text-muted-foreground">
                {new Date(r.date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })} · {r.type}
              </time>
            </div>
          </div>
          <Button variant="outline" size="sm">
            <Download aria-hidden="true" /> Download
          </Button>
        </li>
      ))}
    </ul>
  );
}

function InvestorsPage() {
  return (
    <>
      <PageHeader
        crumbs={[{ label: "Investors" }]}
        eyebrow="Investor relations"
        title="Investors"
        lead="Seed Co Group reports through two listed entities: Seed Co International (BSE and VFEX) and Seed Co Limited (ZSE). Financial reports, circulars and share price information are published here."
      />

      <Section>
        <SectionHeading eyebrow="Share price" title="Share price trends" />
        <ul className="mt-8 grid gap-5 md:grid-cols-3">
          {TICKERS.map((tk) => (
            <li key={tk.code} className="rounded-xl border border-border bg-card p-6 shadow-card">
              <p className="font-display text-lg font-bold">{tk.code}</p>
              <p className="text-xs text-muted-foreground">{tk.market}</p>
              <p className="mt-4 font-display text-3xl font-bold">{tk.price}</p>
              <p className={`mt-1 flex items-center gap-1 text-sm font-semibold ${tk.up ? "text-primary" : "text-destructive"}`}>
                {tk.up ? (
                  <ArrowUpRight aria-hidden="true" className="size-4" />
                ) : (
                  <ArrowDownRight aria-hidden="true" className="size-4" />
                )}
                {tk.change} <span className="font-normal text-muted-foreground">last 30 days</span>
              </p>
            </li>
          ))}
        </ul>

        <div className="mt-8 rounded-xl border border-border bg-card p-6 shadow-card">
          <h3 className="font-display text-lg font-bold">SCIL.bw | 12-month trend</h3>
          <p className="mt-1 text-sm text-muted-foreground">Indicative monthly closing values, rebased.</p>
          <ul className="mt-6 flex h-40 items-end gap-2" aria-hidden="true">
            {SERIES.map((v, i) => (
              <li key={i} className="flex-1 rounded-t bg-gradient-to-t from-primary-deep to-primary" style={{ height: `${v}%` }} />
            ))}
          </ul>
          <p className="mt-3 text-sm text-muted-foreground">
            Over the last twelve months the indicative rebased value moved from 42 to 84, an increase of 100%.
          </p>
        </div>

        <div className="mt-8 overflow-x-auto rounded-xl border border-border bg-card shadow-card">
          <Table>
            <caption className="sr-only">Market indices context</caption>
            <TableHeader>
              <TableRow>
                <TableHead scope="col">Market index</TableHead>
                <TableHead scope="col">Level</TableHead>
                <TableHead scope="col">Change</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {INDICES.map((idx) => (
                <TableRow key={idx.name}>
                  <TableCell className="font-medium">{idx.name}</TableCell>
                  <TableCell>{idx.value}</TableCell>
                  <TableCell>{idx.change}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </Section>

      <Section muted>
        <SectionHeading eyebrow="Financial reports" title="Results, presentations and circulars" />
        <Tabs defaultValue="scil" className="mt-8">
          <TabsList className="flex h-auto flex-wrap justify-start gap-1">
            <TabsTrigger value="scil">SCIL results</TabsTrigger>
            <TabsTrigger value="scl">SCL results</TabsTrigger>
            <TabsTrigger value="circulars">Shareholder circulars</TabsTrigger>
            <TabsTrigger value="analysts">Analysts</TabsTrigger>
          </TabsList>
          <TabsContent value="scil" className="mt-6">
            <ReportList items={SCIL_REPORTS} />
          </TabsContent>
          <TabsContent value="scl" className="mt-6">
            <ReportList items={SCL_REPORTS} />
          </TabsContent>
          <TabsContent value="circulars" className="mt-6">
            <ReportList items={CIRCULARS.map((c) => ({ ...c, type: "Circular" }))} />
          </TabsContent>
          <TabsContent value="analysts" className="mt-6">
            <div className="overflow-x-auto rounded-xl border border-border bg-card shadow-card">
              <Table>
                <caption className="sr-only">Analyst coverage of Seed Co listings</caption>
                <TableHeader>
                  <TableRow>
                    <TableHead scope="col">Research house</TableHead>
                    <TableHead scope="col">Coverage</TableHead>
                    <TableHead scope="col">Current rating</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {ANALYSTS.map((a) => (
                    <TableRow key={a.firm}>
                      <TableCell className="font-medium">{a.firm}</TableCell>
                      <TableCell>{a.coverage}</TableCell>
                      <TableCell>{a.rating}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </TabsContent>
        </Tabs>
      </Section>
    </>
  );
}