import avatarImage from "@/assets/images/avatar.jpeg";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { ArrowLeft, Bold, CalendarDays, ChevronDown, Italic, Link2, List, AlignLeft } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function Page({ params }: { params: { app: string; id: string } }) {
  const { app, id } = params;

  return (
    <div className="space-y-4">
      <div className="mb-2 flex items-center gap-3">
        <Link href={`/${app}/tickets`} className="rounded bg-white p-2 text-[#383E49]">
          <ArrowLeft className="size-4" />
        </Link>
        <h1 className="text-[28px] font-semibold leading-none text-[#272833]">Support Tickets</h1>
      </div>

      <Card className="border-[#EBEEF2]">
        <CardContent className="grid gap-5 p-4 lg:grid-cols-3">
          <div className="space-y-4 lg:col-span-2">
            <div className="flex flex-wrap items-center justify-between gap-2">
              <div className="flex items-center gap-2">
                <span className="size-3 rounded-full bg-[#F59E0B]" />
                <h3 className="text-[26px] font-semibold text-[#272833]">Ticket# 2023-CS123</h3>
              </div>
              <p className="text-[24px] font-semibold text-[#272833]">Date: Mar 7, 2024</p>
            </div>

            <h2 className="text-[36px] font-semibold leading-tight text-[#272833]">How to deposit moy to my portal?</h2>
            <div className="space-y-3 text-[14px] leading-relaxed text-[#8B8D97]">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.
              </p>
            </div>

            <div className="flex flex-wrap gap-2">
              {[1, 2].map((n) => (
                <div key={n} className="flex items-center gap-2 rounded border border-[#D5DEE8] bg-white px-2 py-1.5">
                  <span className="inline-flex h-7 min-w-8 items-center justify-center rounded bg-[#F04438] px-1 text-[10px] font-semibold text-white">
                    PDF
                  </span>
                  <div>
                    <p className="text-[11px] font-semibold text-[#272833]">Doc.pdf</p>
                    <p className="text-[10px] text-[#8B8D97]">29 KB</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="rounded-xl border border-[#E7ECF2] p-3">
              <div className="mb-2 text-[11px] text-[#6B7280]">
                Reply To: <span className="rounded-full bg-[#F1F4F8] px-3 py-1">janet.adebayo@gmail.com</span>
              </div>

              <div className="mb-2 flex flex-wrap items-center gap-2">
                <button className="rounded border border-[#E7ECF2] px-2 py-0.5 text-[10px] text-[#6B7280]">Roboto</button>
                <button className="rounded border border-[#E7ECF2] px-2 py-0.5 text-[10px] text-[#6B7280]">Paragh</button>
                <div className="ml-auto flex items-center gap-2 text-[#111827]">
                  <Bold className="size-3.5" />
                  <Italic className="size-3.5" />
                  <List className="size-3.5" />
                  <AlignLeft className="size-3.5" />
                  <Link2 className="size-3.5" />
                </div>
              </div>

              <Textarea rows={5} placeholder="Your text goes here" className="mb-2 bg-[#F8FAFD] text-[12px]" />

              <div className="flex items-center gap-2">
                <Input placeholder="Help text goes here" className="h-8 bg-[#F8FAFD] text-[11px]" />
                <Button className="h-8 rounded bg-[#074473] px-4 text-[11px] font-semibold text-white">Send &gt;</Button>
              </div>
            </div>
          </div>

          <div className="space-y-4">
            <h3 className="text-[28px] font-semibold text-[#272833]">Ticket Action</h3>
            <button className="flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[12px] text-[#7A8490]">
              Ticket Actions <ChevronDown className="size-4" />
            </button>
            <button className="flex h-10 w-full items-center justify-between rounded-md border border-[#EEF1F4] bg-[#F8F9FC] px-3 text-[12px] text-[#7A8490]">
              Assign to <ChevronDown className="size-4" />
            </button>

            <div className="space-y-2">
              <h4 className="text-[24px] font-semibold text-[#272833]">Customer Details</h4>
              <div className="flex items-center gap-2">
                <Image className="size-12 rounded object-cover" src={avatarImage} alt="" />
                <div>
                  <p className="text-[13px] font-medium text-[#272833]">Janet Adebayo</p>
                  <p className="text-[11px] text-[#8B8D97]">Customer since 12 Sept 2022</p>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3 text-[12px]">
              <div>
                <p className="text-[#9AA1AB]">Phone</p>
                <p className="font-medium text-[#272833]">+1 348 065 6506</p>
              </div>
              <div>
                <p className="text-[#9AA1AB]">Email</p>
                <p className="font-medium text-[#272833]">janet.adebayo@gmail.com</p>
              </div>
              <div>
                <p className="text-[#9AA1AB]">Home Address</p>
                <p className="font-medium text-[#272833]">No. 15 Adekun Street, Yaba, Lagos State</p>
              </div>
              <div>
                <p className="text-[#9AA1AB]">Shipping Address</p>
                <p className="font-medium text-[#272833]">No. 15 Adekun Street, Yaba, Lagos State</p>
              </div>
            </div>

            <div className="space-y-2">
              <h4 className="text-[24px] font-semibold text-[#272833]">Shared Files</h4>
              {[1, 2, 3].map((n) => (
                <div key={n} className="flex items-center gap-2">
                  <Image className="size-10 rounded object-cover" src={avatarImage} alt="" />
                  <div className="min-w-0 grow">
                    <p className="truncate text-[12px] font-semibold text-[#272833]">{n === 2 ? "Doc.pdf" : "Image.jpeg"}</p>
                    <p className="truncate text-[10px] text-[#8B8D97]">Share With Support Staff on 6 Mar, 2024</p>
                  </div>
                  <Link href="#" className="text-[11px] font-semibold text-[#074473]">
                    View
                  </Link>
                </div>
              ))}
              <Link href="#" className="text-[11px] font-semibold text-[#074473]">
                See More
              </Link>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}