import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableHead, TableRow, TableCell, TableBody } from "@/components/ui/table";

export default function StoreSelect() {
  const [storeID, setStoreID] = useState("");
  const [transactions, setTransactions] = useState([]);

  const fetchTransactions = async () => {
    const response = await fetch(`/api/transactions?storeID=${storeID}`);
    const data = await response.json();
    setTransactions(data);
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-xl font-bold">Select Store to Work On</h1>
      <div className="flex gap-2 my-4">
        <Input
          placeholder="Enter Store ID"
          value={storeID}
          onChange={(e) => setStoreID(e.target.value)}
        />
        <Button onClick={fetchTransactions}>Search</Button>
      </div>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Transaction ID</TableCell>
            <TableCell>Store ID</TableCell>
            <TableCell>Cashier ID</TableCell>
            <TableCell>Transaction Number</TableCell>
            <TableCell>Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {transactions.map((t) => (
            <TableRow key={t.TRANSACTION_ID}>
              <TableCell>{t.TRANSACTION_ID}</TableCell>
              <TableCell>{t.StoreID}</TableCell>
              <TableCell>{t.CashierID}</TableCell>
              <TableCell>{t.TransactionNumber}</TableCell>
              <TableCell>
                <Button onClick={() => window.location.href=`/edit/${t.TRANSACTION_ID}`}>
                  Edit
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}