import React, { useState } from "react";

export default function AppraisalWorkflowPortal() {
  const [search, setSearch] = useState("");

  const jobs = [
    {
      id: "AP250001",
      customer: "ABC Co.,Ltd.",
      officer: "Kanin",
      status: "Inspection",
      sla: 1,
    },
    {
      id: "AP250002",
      customer: "XYZ Co.,Ltd.",
      officer: "Somchai",
      status: "Review",
      sla: -2,
    },
    {
      id: "AP250003",
      customer: "123 Property",
      officer: "Suda",
      status: "Analysis",
      sla: 3,
    },
  ];

  const filteredJobs = jobs.filter(
    (j) =>
      j.id.toLowerCase().includes(search.toLowerCase()) ||
      j.customer.toLowerCase().includes(search.toLowerCase())
  );

  const totalJobs = jobs.length;
  const overSLA = jobs.filter((j) => j.sla < 0).length;
  const onTime = jobs.filter((j) => j.sla >= 0).length;

  const exportCSV = () => {
    const headers = [
      "Job ID",
      "Customer",
      "Officer",
      "Status",
      "SLA",
    ];

    const rows = jobs.map((j) => [
      j.id,
      j.customer,
      j.officer,
      j.status,
      j.sla,
    ]);

    const csvContent = [
      headers.join(","),
      ...rows.map((r) => r.join(",")),
    ].join("\n");

    const blob = new Blob([csvContent], {
      type: "text/csv;charset=utf-8;",
    });

    const url = URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.download = "Appraisal_Report.csv";
    link.click();
  };

  return (
    <div className="min-h-screen bg-slate-100 p-6">
      <h1 className="text-3xl font-bold mb-6">
        Appraisal Workflow Portal
      </h1>

      <div className="grid grid-cols-3 gap-4 mb-6">
        <div className="bg-white p-5 rounded-2xl shadow">
          <h3 className="text-gray-500">Total Jobs</h3>
          <p className="text-3xl font-bold">{totalJobs}</p>
        </div>

        <div className="bg-green-100 p-5 rounded-2xl shadow">
          <h3>On Time</h3>
          <p className="text-3xl font-bold">{onTime}</p>
        </div>

        <div className="bg-red-100 p-5 rounded-2xl shadow">
          <h3>Over SLA</h3>
          <p className="text-3xl font-bold">{overSLA}</p>
        </div>
      </div>

      <div className="bg-white rounded-2xl p-5 shadow">
        <div className="flex justify-between mb-4">
          <input
            type="text"
            placeholder="Search Job..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="border px-4 py-2 rounded-xl w-72"
          />

          <button
            onClick={exportCSV}
            className="bg-blue-600 text-white px-4 py-2 rounded-xl"
          >
            Export Report
          </button>
        </div>

        <table className="w-full">
          <thead>
            <tr className="border-b">
              <th className="text-left p-3">Job ID</th>
              <th className="text-left p-3">Customer</th>
              <th className="text-left p-3">Officer</th>
              <th className="text-left p-3">Status</th>
              <th className="text-left p-3">SLA</th>
            </tr>
          </thead>

          <tbody>
            {filteredJobs.map((job) => (
              <tr key={job.id} className="border-b">
                <td className="p-3">{job.id}</td>
                <td className="p-3">{job.customer}</td>
                <td className="p-3">{job.officer}</td>
                <td className="p-3">{job.status}</td>
                <td
                  className={`p-3 font-semibold ${
                    job.sla < 0
                      ? "text-red-600"
                      : "text-green-600"
                  }`}
                >
                  {job.sla < 0
                    ? `Over ${Math.abs(job.sla)} Day`
                    : `${job.sla} Day Left`}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}